title: <div> in navbar not aligning properly
body: <p>I'm using the basic bootstrap css with nothing altered, and I have the following html in a Razor View in ASP.NET MVC:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;!--&lt;span class="icon-bar"&gt;&lt;/span&gt;--&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  @if (ViewBag.WidgetPages != null)
                  {
                      foreach (WidgetPage page in ViewBag.WidgetPages)
                      {                            
                          &lt;li class="navbar-collapse"&gt;&lt;div&gt;
                              &lt;a href="@Url.Action("Index", "WidgetPage")" class="navbar-link"&gt;@page.Title  &lt;/a&gt;
                              &lt;a href="@Url.Action("Edit", "WidgetPage", new { id = page.Id })" class="navbar-link"&gt;&lt;span class="glyphicon glyphicon-pencil" role="button"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;a href="@Url.Action("Delete", "WidgetPage", new { id = page.Id })" class="navbar-link"&gt;&lt;span class="glyphicon glyphicon-remove" role="button"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      }
                  }
                  &lt;li&gt;&lt;a href="@Url.Action("Create", "WidgetPage")"&gt;
                          &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              @Html.Partial("_LoginPartial")
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>All my navigation links are working just as they should - however, the alignment of the navigation bar is off from what I expect and want. What I'm ending up with is <a href="http://puu.sh/kN0NJ/ea996c060b.png" rel="nofollow">http://puu.sh/kN0NJ/ea996c060b.png</a>, and what I'm hoping to get is simply all of the items aligned on the same line. </p>
  
  <p>Update: I have the following CSS in my content folder:</p>
  
  <pre><code>.navbar.navbar-edit .navbar-nav li.edited .edit-link a {
    color: #fff;
  }
  .navbar.navbar-edit .navbar-nav li.edited .edit-link a:hover {
    color: #ccc;
  }
    .navbar.navbar-edit .navbar-nav li.edited a {
        display: inline-block;
        position: relative;
        padding-right: 4px;
        padding-left: 4px;
    }
    .navbar.navbar-edit .navbar-nav .edit-link{
        padding-left: 4px;
        padding-right: 4px;
    }
    @media (max-width: 767px){
        .navbar.navbar-edit .navbar-nav li.edited a{
            padding-left: 15px;
        }
    }
  </code></pre>
  
  <p>with the following Razor View code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-edit navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;!--&lt;span class="icon-bar"&gt;&lt;/span&gt;--&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      @if (ViewBag.WidgetPages != null)
                      {
                          foreach (WidgetPage page in ViewBag.WidgetPages)
                          {
                              &lt;li class="edited"&gt;
                                  &lt;a href="@Url.Action("Index","WidgetPage",new { id = @page.Id })" class="navbar-link"&gt;@page.Title&lt;/a&gt;
                                  &lt;span class="edit-link"&gt;&lt;a href="@Url.Action("Edit", "WidgetPage", new { id = @page.Id })" class="navbar-link"&gt;
                                      &lt;span class="glyphicon glyphicon-pencil" role="button"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
                                  &lt;span class="edit-link"&gt;
                                      &lt;a href="@Url.Action("Delete", "WidgetPage", new { id = @page.Id })" class="navbar-link"&gt;
                                          &lt;span class="glyphicon glyphicon-remove" role="button"&gt;&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/span&gt;
                              &lt;/li&gt;
                          }
                      }
                      &lt;li&gt;
                          &lt;a href="@Url.Action("Create", "WidgetPage")"&gt;
                              &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
                  @Html.Partial("_LoginPartial")
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>but I'm still ending up with the stacked buttons. I'm really at a loss here for what is happening. </p>