diff --git a/include/header.inc b/include/header.inc
index 683583aba..116784570 100755
--- a/include/header.inc
+++ b/include/header.inc
@@ -103,14 +103,20 @@ if (isset($shortname) && $shortname) {
 
 <?php if (!empty($config['breadcrumbs'])): ?>
   <div id="breadcrumbs" class="container">
-<?php
-      if (isset($config['prev'])) {
-        echo "<a class='prev' href='{$config['prev'][0]}'>&laquo; {$config['prev'][1]}</a>";
-      }
-      if (isset($config['next'])) {
-          echo "<a class='next' href='{$config['next'][0]}'>{$config['next'][1]} &raquo;</a>";
-      }
-?>
+    <?php if (isset($config['prev'])): ?>
+      <div class="prev">
+        <a href="<?php echo $config['prev'][0]; ?>">
+          &laquo; <?php echo $config['prev'][1]; ?>
+        </a>
+      </div>
+    <?php endif; ?>
+    <?php if (isset($config['next'])): ?>
+      <div class="next">
+        <a href="<?php echo $config['next'][0]; ?>">
+          &laquo; <?php echo $config['next'][1]; ?>
+        </a>
+      </div>
+    <?php endif; ?>
     <ul class="breadcrumbs-container">
       <?php
           $breadcrumbs = $config['breadcrumbs'];
diff --git a/styles/theme-base.css b/styles/theme-base.css
index b497cb241..090f97592 100755
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -3228,6 +3228,9 @@ div.soft-deprecation-notice blockquote.sidebar {
 #breadcrumbs li {
     display:inline-block;
 }
+#breadcrumbs li:first-child a {
+    padding-left: 0;
+}
 #breadcrumbs a:link,
 #breadcrumbs a:visited {
     border-width:0;
@@ -3241,6 +3244,9 @@ div.soft-deprecation-notice blockquote.sidebar {
 
 #breadcrumbs .prev {
     float: left;
+    min-width: 23.4043%;
+    margin-right: 2.1276%;
+    box-sizing: border-box;
 }
 #breadcrumbs .next {
     float: right;
@@ -3254,6 +3260,18 @@ div.soft-deprecation-notice blockquote.sidebar {
         display: none;
     }
 }
+@media (min-width: 768px) and (max-width: 979px) {
+    #breadcrumbs .prev {
+        min-width: 22.9282%;
+        margin-right: 2.7624%;
+    }
+}
+@media (min-width: 1200px) {
+    #breadcrumbs .prev {
+        min-width: 18%;
+        margin-right: 1%;
+    }
+}
 
 /* Re-layout the breadcrumbs using flexbox if it's available. */
 .flexbox #breadcrumbs .breadcrumbs-container,
@@ -3263,7 +3281,7 @@ div.soft-deprecation-notice blockquote.sidebar {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-    padding: 0 0.625em;
+    padding: 0 0.625em 0 0;
 }
 .flexbox #breadcrumbs .breadcrumbs-container li:last-child,
 .flexboxlegacy #breadcrumbs .breadcrumbs-container li:last-child {
diff --git a/styles/theme-medium.css b/styles/theme-medium.css
index 21bcf6abf..6bce2bb19 100755
--- a/styles/theme-medium.css
+++ b/styles/theme-medium.css
@@ -355,8 +355,8 @@ aside.tips div.border {
 }
 #breadcrumbs li ul {
 }
-#breadcrumbs a.prev,
-#breadcrumbs a.next,
+#breadcrumbs .prev a,
+#breadcrumbs .next a,
 #breadcrumbs .breadcrumbs-container li:last-child a {
     color:#fff;
 	background-color: rgb(102, 102, 153);
@@ -365,8 +365,8 @@ aside.tips div.border {
 #breadcrumbs a:visited {
   color:#eff;
 }
-#breadcrumbs a.prev,
-#breadcrumbs a.next,
+#breadcrumbs .prev a,
+#breadcrumbs .next a,
 #breadcrumbs li:last-child a:hover,
 #breadcrumbs li:last-child a:focus,
 #breadcrumbs a:hover,