title: Bootstrap Affix Changing List Item Width
body: <p>I'm using Twitter Bootstrap's affix to affix the left column which currently holds a navigation list.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span3"&gt;
          &lt;ul class="nav nav-list" data-spy="affix" data-offset-top="300"&gt;
              &lt;li class="nav-header"&gt;Navigation&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>From my understanding, this means that affix won't kick in until 300px have been scrolled.  My problem is that the width of my list item changes after affix kicks in.</p>
  
  <p>Here is a screenshot of my hovering over a list item before affix kicks in.  You can based on the hover background, the width is correct.</p>
  
  <p><img src="https://i.stack.imgur.com/krhTU.png" alt="Before Affix"></p>
  
  <p>Here is a screenshot after I've scrolled 300px and affix kicks in.  You can see that for some reason the width decreases.</p>
  
  <p><img src="https://i.stack.imgur.com/VjqWk.png" alt="After Affix"></p>
  
  <p>I want to know why this is happening, how to correct it, and if I am using affix correctly.</p>