overflow dropdown

css/main.css

@@ -22,17 +22,21 @@ body {
 	top: 0;
 	left: 0;
 	width: 100%;
+}
+
+#nav #content {
+	width: 100%;
 	text-align: center;
 	padding: 1.5em 0 31.5em 0;
 	z-index: 1;
-    overflow: hidden;
+	overflow-x: hidden;
 }
 
 ul, li {
 	list-style: none;
 }
 
-#nav > ul {
+#nav #content > ul {
     line-height: 0px;
     position: relative;
     display: inline-block;
@@ -43,7 +47,7 @@ ul, li {
     padding: 0 0.5em;
 }
 
-#nav > ul > li {
+#nav #content > ul > li {
 	display: inline-block;
 	margin: -9px 0.5em 0 0.5em;
 	border-radius: 0.5em;
@@ -52,17 +56,17 @@ ul, li {
 	position: relative;
 }
 
-#nav > ul::before {
+#nav #content > ul::before {
     left: 100%;
     margin-left: 1px;
 }
 
-#nav > ul::after {
+#nav #content > ul::after {
     right: 100%;
     margin-right: 1px;
 }
 
-#nav > ul::before, #nav > ul::after {
+#nav #content > ul::before, #nav #content > ul::after {
     content: '';
     display: block;
     width: 300%;

index.html

@@ -29,6 +29,7 @@
 					<!-- Nav -->
           <!-- Todo – drop down list in css -->
 						<nav id="nav">
+							<div id="content">
 								<ul>
 									<li><a href="index.html">Home</a></li>
 									<li>
@@ -53,6 +54,7 @@
 									<li><a href="right-sidebar.html">Right Sidebar</a></li>
 									<li><a href="no-sidebar.html">No Sidebar</a></li>
 								</ul>
+							</div>
 						</nav>
 
 				</div>