Eugene Triguba Eugene Triguba - 1 year ago 64
CSS Question

My navigation bar is vertical but won't go horizontal

I've been having trouble making my navigation bar for some reason. I've tried looking at if anything here answers it or going online but have had no luck. Am I missing something or is there a conflict?

html, body {
margin: 0;
padding: 0;

.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;

.jumbotron {
background: url(../img/bg.jpg) no-repeat center center;
background-size: cover;
height: 800px;

.header {
background-color: #333;

.nav {
list-style-type: none;
margin: 0;
padding: 20px 0;

.nav li a {
color: #fff;
display: inline;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
margin-right: 25px;
text-transform: uppercase;

<div class="header">
<div class="container">
<ul class="nav" role="navigation">
<li><a href="#">About</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Reading</a></li>
<li><a href="#">Contact</a></li>

Answer Source

I made you a plunker as an example. You were very close. You just need to set the display property on the .nav li selector to inline-block.

.nav li {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download