title: bootstrap - button group - button being cut off on left hand side
body: <p><strong>Problem:</strong> 
  A button group I've created using bootstrap css appears cut off on the left, as you can see below.</p>
  
  <p><img src="https://i.stack.imgur.com/2iwyh.png" alt="enter image description here"></p>
  
  <p><strong>Code:</strong></p>
  
  <p>I have the following HTML logic: </p>
  
  <pre><code>&lt;div class="span5"&gt;
          &lt;div class="row show-grid"&gt; 
          &lt;div class="btn-group&gt;
              &lt;button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown"&gt;show info&amp;nbsp;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;div id="address"&gt;&lt;?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?&gt;&lt;/div&gt;&lt;/li&gt;
                &lt;li&gt;&lt;div id="logs"&gt;&lt;?php echo anchor("mycontroller/method2/",'logs'); ?&gt;&lt;/div&gt;&lt;/li&gt;
                &lt;li&gt;&lt;div id="status"&gt;&lt;?php echo anchor("mycontroller/method3/",'status'); ?&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;br/&gt;
              &lt;div class="span2"&gt;&lt;?php echo anchor("mycontroller/method4/","Back to List")?&gt;&lt;/div&gt;
    &lt;/div&gt;&lt;!-- end class row show-grid--&gt;     
    &lt;br/&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I've Tried So Far:</strong> </p>
  
  <p>I've been using Firefox's Inspect tool to try to find the differences between the top button and the bottom,  but I don't know what property I should be looking for. I've tried modifying properties like: </p>
  
  <pre><code>padding-left
  padding-right
  margin-left 
  margin-right
  </code></pre>
  
  <p>I've also tried to reduce the number of classes applied to the button so that I only had: </p>
  
  <pre><code>&lt;button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"&gt;
  </code></pre>
  
  <p>But that didn't resolve the problem. Can someone point me in the right direction?  Perhaps by naming the types of properties I should be tracking down?  It's probably a CSS specificity problem... because I haven't modified any of the bootstrap stuff. </p>
  
  <p>Thanks</p>