diff --git a/school/lms/md.py b/school/lms/md.py
index b072af2a..5acb6322 100644
--- a/school/lms/md.py
+++ b/school/lms/md.py
@@ -105,7 +105,7 @@ def sanitize_html(html, macro):
     any broken tags. This makes sures that all those things are fixed
     before passing to the etree parser.
     """
-    soup = BeautifulSoup(html, features="html5lib")
+    soup = BeautifulSoup(html, features="lxml")
     nodes = soup.body.children
     classname = ""
     if macro == "YouTubeVideo":
diff --git a/school/public/css/style.css b/school/public/css/style.css
index cf96ef7b..d7deff62 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -1136,6 +1136,9 @@ input[type=checkbox] {
 .progress {
   width: 100%;
   height: 4px;
+}
+
+.course-card-wide .progress {
   background-color: var(--gray-500);
 }
 
@@ -1348,6 +1351,11 @@ pre {
   top: 40%;
 }
 
+.related-courses {
+  background: var(--gray-50);
+  padding: 5rem 0;
+}
+
 .carousel-indicators {
   position: inherit;
   margin: 0;
@@ -1559,7 +1567,7 @@ pre {
 }
 
 .video-in-overlay {
-  top: 20%;
+  top: 30%;
 }
 
 .course-overlay-content {
diff --git a/school/www/courses/course.html b/school/www/courses/course.html
index ac824558..3cc0c72e 100644
--- a/school/www/courses/course.html
+++ b/school/www/courses/course.html
@@ -14,8 +14,8 @@
       {{ CourseCreator(course) }}
       {{ widgets.Reviews(course=course, membership=membership) }}
     </div>
-    {{ RelatedCourses(course) }}
   </div>
+  {{ RelatedCourses(course) }}
 </div>
 {% endblock %}
 
@@ -214,33 +214,36 @@
 {% macro RelatedCourses(course) %}
 {% if course.related_courses | length %}
 <div class="related-courses">
-  <div class="course-home-headings"> {{ _("Other Courses") }} </div>
-  <div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false">
-    <div class="carousel-inner">
-      {% for crs in course.related_courses %}
-        {% if loop.index % 3 == 1 %}
-        <div class="carousel-item {% if loop.index == 1 %} active {% endif %}"><div class="cards-parent">
-        {% endif %}
-        {{ widgets.CourseCard(course=crs, read_only=False) }}
-        {% if loop.index % 3 == 0 or loop.index == course.related_courses | length %} </div> </div> {% endif %}
-      {% endfor %}
+  <div class="container">
+    <div class="course-home-headings"> {{ _("Other Courses") }} </div>
+    <div class="carousel slide" id="carouselExampleControls" data-ride="carousel" data-interval="false">
+      <div class="carousel-inner">
+        {% for crs in course.related_courses %}
+          {% if loop.index % 3 == 1 %}
+          <div class="carousel-item {% if loop.index == 1 %} active {% endif %}"><div class="cards-parent">
+          {% endif %}
+          {{ widgets.CourseCard(course=crs, read_only=False) }}
+          {% if loop.index % 3 == 0 or loop.index == course.related_courses | length %} </div> </div> {% endif %}
+        {% endfor %}
+      </div>
+
+      {% if course.related_courses | length > 3 %}
+      <div class="slider-controls">
+        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+
+        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div>
+      {% endif %}
+
     </div>
-
-    {% if course.related_courses | length > 3 %}
-    <div class="slider-controls">
-      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="sr-only">Previous</span>
-      </a>
-
-      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="sr-only">Next</span>
-      </a>
-    </div>
-    {% endif %}
-
   </div>
+
 </div>
 {% endif%}
 {% endmacro %}