diff --git a/src/pages/overall/overall-course/course-head/course-head.scss b/src/pages/overall/overall-course/course-head/course-head.scss
index 814e484..eb2b2ce 100644
--- a/src/pages/overall/overall-course/course-head/course-head.scss
+++ b/src/pages/overall/overall-course/course-head/course-head.scss
@@ -32,12 +32,6 @@
     }
 }
 
-#block-term-grades
-{
-    width: 100px;
-    float: right;
-}
-
 #block-grade
 {
     // Align right
@@ -98,3 +92,12 @@
         }
     }
 }
+
+#block-term-grades
+{
+    // Align right
+    width: 100px;
+    float: right;
+
+
+}
diff --git a/src/pages/overall/overall-course/course-head/course-head.vue b/src/pages/overall/overall-course/course-head/course-head.vue
index d0f2f73..668e071 100644
--- a/src/pages/overall/overall-course/course-head/course-head.vue
+++ b/src/pages/overall/overall-course/course-head/course-head.vue
@@ -17,9 +17,8 @@
             </div>
         </div>
         <div id="block-term-grades" v-for="term in course.allGradingPeriods.slice().reverse()">
-            <span class="letter">{{course.letterGradeTerm(term)}} </span>
-            <span class="numeric">{{course.numericGradeTerm(term).toFixed(2)}}</span>
-            <span class="percent">%</span>
+            <div class="term-letter">{{course.letterGradeTerm(term)}} </div>
+            <div class="term-numeric">{{course.numericGradeTerm(term).toFixed(1)}}%</div>
         </div>
     </div>
 </template>