title: Bootstrap navbar a.brand breaks onto own line when setting @gridGutterWidth(s) to 0px for a flush grid
body: <p>firstly thank you StackOverflow community for destroying many evil bugs through the wonders of crowd sourcing, before I even ran into them.</p>
  
  <p>I am building a site using the Wordpress Roots theme (based on HTMl5 Boilerplate and Bootstrap). I'm using some of Bootstrap and overriding other bits, writing custom CSS a lot etc.</p>
  
  <p>My problem is with the Bootstrap responsive navbar. I am creating a page including a fluid grid section - as all sections are flush in this scroll-ey type design, I want to remove all gutters from the Bootstrap grid. To achieve this I set the GutterWidths to 0px in variables.less as below then compile with simpLESS:</p>
  
  <pre><code>// Default 940px grid
  // -------------------------
  @gridColumns:             12;
  @gridColumnWidth:         60px;
  @gridGutterWidth:         0px;
  @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
  
  // 1200px min
  @gridColumnWidth1200:     70px;
  @gridGutterWidth1200:     0px;
  @gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
  
  // 768px-979px
  @gridColumnWidth768:      42px;
  @gridGutterWidth768:      0px;
  @gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));// Default 940px grid
  </code></pre>
  
  <p>One would hope adjusting the grid system has nothing to do with the navbar but the logo (a.brand) is breaking onto its own line above the links, see: <a href="http://twvid.co/mega/case-studies" rel="nofollow">http://twvid.co/mega/case-studies</a></p>
  
  <p>It looks like somewhere in the mire of LESS these gutter values are being used as variables to determine some navbar layout stuff I'm struggling to track down in FF web dev tools.</p>
  
  <p>Nothing special going on with the WP side, here's the navbar:</p>
  
  <pre><code>  &lt;header class="banner navbar navbar-static-top navbar-inverse" role="banner"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="brand" href="http://www.tanglewoodproductions.co.uk/mega/"&gt;
          Tanglewood Video      &lt;/a&gt;
        &lt;nav class="nav-main nav-collapse collapse" role="navigation"&gt;
          &lt;ul id="menu-primary-navigation" class="nav"&gt;&lt;li class="menu-home"&gt;&lt;a href="/mega/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-video-marketing"&gt;&lt;a href="/mega/video-marketing/"&gt;video marketing&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-video-production"&gt;&lt;a href="/mega/video-production/"&gt;video production&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active menu-case-studies"&gt;&lt;a href="/mega/case-studies/"&gt;case studies&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-contact-us"&gt;&lt;a href="/mega/work-with-us/"&gt;contact us&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-blog"&gt;&lt;a href="/mega/blog/"&gt;blog&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;      &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Navbar CSS:</p>
  
  <pre><code>.banner { }
  
  .navbar .nav {
      font-size: 18px;
  }
  
  a.brand  {
      line-height: 20px;
  }
  
  .page-header  h1{
      text-transform: uppercase;
  }
  </code></pre>
  
  <p>Grid section:</p>
  
  <pre><code>&lt;section class="container-fluid scroll-section" id="case-studies-portfolio"&gt;
      &lt;h1 class="text-center section-heading"&gt;case studies&lt;/h1&gt;
      &lt;h2 class="text-center section-slug"&gt;stuff we've done&lt;/h2&gt;
      &lt;div class="row-fluid" id="portfolio-grid"&gt;
          &lt;div class="span8 portfolio-cell"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/div&gt;
          &lt;div class="span2 portfolio-cell"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/div&gt;
          &lt;div class="span2 portfolio-cell"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/div&gt;        
      &lt;/div&gt;
      &lt;div class="row-fluid" id="portfolio-grid"&gt;
          &lt;div class="span4 portfolio-cell"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/div&gt;
          &lt;div class="span4 portfolio-cell"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/div&gt;
          &lt;div class="span4 portfolio-cell"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/div&gt;        
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Grid css: </p>
  
  <pre><code>#case-studies-portfolio {
      position: relative;
      z-index: 4;
  }
  
  #portfolio-grid  {
      border-color: rgb(0,0,0);
      border-width: 1px;
      border-style: dotted;
  
  }
  
  /* #portfolio-grid [class*="span"] {
      margin-left: 0;
  } */
  
  .portfolio-cell {
      color: #fff;
      background-color: rgba(30,30,30,1);
      height: 100%;
  }
  </code></pre>
  
  <p>Aside: I'm also trying to get the grid cells to be full height regardless of content.</p>
  
  <p>Of course, just overriding this in my CSS could work too (not sure how), but as I'm only using the grid on one page, and I'm not expecting to want all this padding elsewhere if I use more grids, I thought I'd nip the problem in the bud to reduce code redundancy.</p>
  
  <p>I hope any suggestions might be useful for anyone looking to use the Bootstrap grid for flush grid layouts simply (adding in padding where needed) without breaking their navbar.</p>
  
  <p>Many thanks in advance.</p>
  
  <p>NB: This is a live dev site so my problem might not actually appear on the linked page as I do stuff to it - StackOverflow won't let me post images.</p>