nav bar won't display horizontally when fully expanded in the browser

Question

I am trying to get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1 . As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.

 #wrapper{ background-color: #FFFFFF; color: #000066; min-width: 700px; max-width: 1024px; margin-right: auto; margin-left: auto; padding-top: 0px; } h1 { background-color: darkcyan; color: #74ebd5; background-position: center; background-repeat: no-repeat; text-align: center; font-size: 3em; line-height: 80%; padding: 30px; text-shadow: #CCCCCC; margin-bottom: 0; } main { margin-left: 180px; padding-bottom: 100px; } ul { list-style-type: none; margin: 0; padding: 10px; overflow: hidden; background-color: #333; width: 100%; } li a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } nav{ display:inline-block; width: 100%; font-weight: bold; background-color: grey; } nav ul { list-style: none; width: 100%; border: 1px solid ; text-align: right; display:inline-block; } nav a{ text-decoration: none; border: 1px solid; width: 100% } nav a:link{color:cyan;} nav a:visited{color:#6699FF;} nav a:hover{color: gold;} 

 <div id="wrapper"> <header> <h1>Polar Bar</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="social.html">Social</a></li> </ul> </nav> 

Answer 1

Make the li elements inline-block , and add box-sizing:border-box :

 CSS: #wrapper { background-color: #FFFFFF; color: #000066; width: 700px; max-width: 1024px; margin-right: auto; margin-left: auto; padding-top: 0px; } h1 { background-color: darkcyan; color: #74ebd5; background-position: center; background-repeat: no-repeat; text-align: center; font-size: 3em; line-height: 80%; padding: 30px; text-shadow: #CCCCCC; margin-bottom: 0; } main { margin-left: 180px; padding-bottom: 100px; } ul { list-style-type: none; margin: 0; padding: 10px; overflow: hidden; background-color: #333; width: 100%; box-sizing: border-box; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; box-sizing: border-box; } nav { display: inline-block; width: 100%; font-weight: bold; background-color: grey; } nav ul { list-style: none; width: 100%; border: 1px solid; text-align: right; display: inline-block; } nav a { text-decoration: none; border: 1px solid; width: 100%; } nav a:link { color: cyan; } nav a:visited { color: #6699FF; } nav a:hover { color: gold; } 

 <div id="wrapper"> <header> <h1>Polar Bar</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="social.html">Social</a></li> </ul> </nav> 

Answer 2

I don't understand your question. what did you want?.But Is this you want?

 #wrapper{ background-color: #FFFFFF; color: #000066; min-width: 700px; max-width: 1024px; margin-right: auto; margin-left: auto; padding-top: 0px; } h1 {background-color: darkcyan; color: #74ebd5; background-position: center; background-repeat: no-repeat; text-align: center; font-size: 3em; line-height: 80%; padding: 30px; text-shadow: #CCCCCC; margin-bottom: 0;} main {margin-left: 180px; padding-bottom: 100px; } ul { list-style-type: none; margin: 0; padding: 10px; overflow: hidden; background-color: #333; width: 98% !important; } li a { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } nav{ display:inline-block; width: 100%; font-weight: bold; background-color: grey; } nav ul { list-style: none; width: 100%; border: 1px solid; text-align: right; display: inline-block; } nav > ul > li { float: left; display: inline-block; } nav a{text-decoration: none; border: 1px solid; } nav a:link{color:cyan; } nav a:visited{color:#6699FF;} nav a:hover{color: gold;} 

 <div id="wrapper"> <header> <h1>Polar Bar</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="social.html">Social</a></li> </ul> </nav> </header> </div>