1 files changed, 25 insertions, 5 deletions
diff --git a/examples/carousel/carousel.css b/examples/carousel/carousel.css
index 164f306ea..a728bd899 100644
--- a/examples/carousel/carousel.css
+++ b/examples/carousel/carousel.css
@@ -14,8 +14,21 @@ body {
 
 /* Special class on .container surrounding .navbar, used for positioning it into place. */
 .navbar-wrapper {
-  position: relative;
-  z-index: 15;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 20;
+}
+
+/* Flip around the padding for proper display in narrow viewports */
+.navbar-wrapper .container {
+  padding-left: 0;
+  padding-right: 0;
+}
+.navbar-wrapper .navbar {
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 
@@ -24,10 +37,8 @@ body {
 
 /* Carousel base class */
 .carousel {
+  height: 500px;
   margin-bottom: 60px;
-
-  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
-  margin-top: -90px;
 }
 /* Since positioning the image, we need to help out the caption */
 .carousel-caption {
@@ -103,6 +114,15 @@ body {
   .navbar-wrapper {
     margin-top: 20px;
   }
+  .navbar-wrapper .container {
+    padding-left:  15px;
+    padding-right: 15px;
+  }
+  .navbar-wrapper .navbar {
+    padding-left:  0;
+    padding-right: 0;
+  }
+
   /* The navbar becomes detached from the top, so we round the corners */
   .navbar-wrapper .navbar {
     border-radius: 4px;