diff --git a/profile.html b/profile.html
index 1b6b2c8fc0..fd5b3ef0ab 100644
--- a/profile.html
+++ b/profile.html
@@ -89,7 +89,7 @@ $(function() {
     <section class="course-info">
       <h1>Course Progress</h1>
 
-      <div id="grade-detail-graph" style="width:650px;height:200px;"></div>
+      <div id="grade-detail-graph"></div>
             
       <ol class="chapters">
         %for chapter in chapters:
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 00b25ceb12..e85518c922 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -59,32 +59,37 @@ div.profile-wrapper {
       @extend .top-header;
     }
 
+    div#grade-detail-graph {
+      width: 100%;
+      min-height: 300px;
+    }
+
     > ol {
-      list-style: none;
       border-top: 1px solid #e3e3e3;
+      list-style: none;
       margin-top: lh();
 
       > li {
+        @extend .clearfix;
         border-bottom: 1px solid #e3e3e3;
+        display: table;
         padding: lh() 0;
         width: 100%;
-        display: table;
-        @extend .clearfix;
 
         h2 {
-          display: table-cell;
-          padding: 0;
-          margin: 0;
-          width: flex-grid(2, 9);
-          padding-right: flex-gutter(9);
           border-right: 1px dotted #ccc;
           @include box-sizing(border-box);
+          display: table-cell;
+          margin: 0;
+          padding: 0;
+          padding-right: flex-gutter(9);
+          width: flex-grid(2, 9);
         }
 
         ol.sections {
-          padding-left: flex-gutter(9);
           display: table-cell;
           list-style: none;
+          padding-left: flex-gutter(9);
           width: flex-grid(7, 9);
 
          > li {
@@ -114,6 +119,5 @@ div.profile-wrapper {
         }
       }
     }
-
   }
 }