Search code examples
cssheaderhtml-listsstylesheetdisplay

Why is my log out link going off the edge of the screen?

I’m trying to right align navigation links to the right of my header section. So I created

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">My Subscriptions</a></li>
            <li><a href="#">Help</a></li>
            <li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
          </ul>

and added this style

header ul {
  float: right;
  list-style: none;
}

header ul li {
  float: left;
  margin-left: 15px;
}

But my Log Out link is going off the edge of the screen — https://jsfiddle.net/p2rwgfjc/ . How can I modify this so that all the text stays on the screen?

Solution

  • Just add margin-right: 15px to your header ul.

    header ul {
  float: right;
  list-style: none;
  margin-right: 15px;
}

    Fiddle: https://jsfiddle.net/og165aky/