Li INLINE


#1

I opened the full screen and noticed that not all the li elements on the top of web page are in the same line

.nav li {
display: inline;
}

Please suggest a way to solve this problem.

Thank you very much. : )


#2

Only some are ? That's odd please paste in your HTML code so we can have a look.


#3

<body>
    <div class="nav">
      <div class="container">
      <ul class="pull-left">
      </ul>
      <ul class="pull-right">
      </ul>
        <ul>
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

That is index.html,

and here is main.css

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav  li {
  display:  inline;
}

.jumbotron {
  background-image:url('http://goo.gl/04j7Nn');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

#5

Oops XD,I changed ul to ul class="pull-left" and then it worked.