diff --git a/index.html b/index.html
index f3948c0..ab0427b 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
 
 <body>
 
-	<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
+	<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
 		<!-- <a class="navbar-brand" href=".">Start</a >-->
 		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
 		 aria-expanded="false" aria-label="Toggle navigation">
@@ -28,10 +28,10 @@
 				<!-- Keep this to push elements to the right -->
 			</ul>
 			<form class="form-inline mt-2 mt-md-0">
-				<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
-				<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
-				<button id="btnEdit" class="btn btn-light ml-sm-2" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
-				<button class="btn btn-light ml-sm-2" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button>
+				<button class="btn btn-light ml-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
+				<button class="btn btn-light ml-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
+				<button id="btnEdit" class="btn btn-light ml-2" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
+				<button class="btn btn-light ml-2" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button>
 			</form>
 		</div>
 	</nav>
diff --git a/main.css b/main.css
index 8b894bb..df608d3 100644
--- a/main.css
+++ b/main.css
@@ -2,14 +2,10 @@ body {
 	width: 100%;
 	height: 100%;
 	background: white no-repeat center center fixed;
-    background-size: cover;
+	background-size: cover;
 
-    tab-size: 4;
-    -moz-tab-size: 4;
-}
-
-#wrapper {
-	width: 60%;
+	tab-size: 4;
+	-moz-tab-size: 4;
 }
 
 .card-header {
@@ -27,43 +23,56 @@ body {
 }
 
 .card {
-    border: 0px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+	border: 0px;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .navbar {
-    background: transparent !important;
+	background: transparent !important;
+}
+
+/* set the width of the main container based on element width */
+@media (max-width: 34em) {
+	#wrapper {
+		width: 90%;
+	}
+}
+
+@media (min-width: 34em) {
+	#wrapper {
+		width: 60%;
+	}
 }
 
 /* change the number of columns in card-columns */
 @media (min-width: 34em) {
-    .card-columns {
-        -webkit-column-count: 1;
-        -moz-column-count: 1;
-        column-count: 1;
-    }
+	.card-columns {
+		-webkit-column-count: 1;
+		-moz-column-count: 1;
+		column-count: 1;
+	}
 }
 
 @media (min-width: 48em) {
-    .card-columns {
-        -webkit-column-count: 1;
-        -moz-column-count: 1;
-        column-count: 1;
-    }
+	.card-columns {
+		-webkit-column-count: 1;
+		-moz-column-count: 1;
+		column-count: 1;
+	}
 }
 
 @media (min-width: 62em) {
-    .card-columns {
-        -webkit-column-count: 2;
-        -moz-column-count: 2;
-        column-count: 2;
-    }
+	.card-columns {
+		-webkit-column-count: 2;
+		-moz-column-count: 2;
+		column-count: 2;
+	}
 }
 
 @media (min-width: 75em) {
-    .card-columns {
-        -webkit-column-count: 2;
-        -moz-column-count: 2;
-        column-count: 2;
-    }
+	.card-columns {
+		-webkit-column-count: 2;
+		-moz-column-count: 2;
+		column-count: 2;
+	}
 }
