title: Bootstrap horizontal description list whitespace
body: <p>How do I remove the white space to the left of Description 1 and 2? Is there a better alternative than horizontal description lists?</p>
  
  <p><img src="https://i.stack.imgur.com/MuggJ.jpg" alt="enter image description here"></p>
  
  <p>Here's the problem on my own site (descriptions are too far to the right)</p>
  
  <p><img src="https://i.stack.imgur.com/oE6eI.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="media"&gt;
  
              &lt;!-- Card images --&gt;
              &lt;div class="col-lg-5"&gt;
                  &lt;div class="center-block"&gt;
                      &lt;img id="card-image" src="images/demo-1.png" alt="Placeholder" width="150" height="224"&gt;
                      &lt;img id="card-image-2" src="images/demo-2.png" alt="Placeholder" width="150" height="224"&gt;
                  &lt;/div&gt;                    
                  &lt;br&gt;
                  &lt;dl class="dl-horizontal"&gt;
                      &lt;dt&gt;Set :&lt;/dt&gt;&lt;dd&gt;Basic&lt;/dd&gt;
                      &lt;dt&gt;Type :&lt;/dt&gt;&lt;dd&gt;Minion&lt;/dd&gt;
                      &lt;dt&gt;Rarity :&lt;/dt&gt;&lt;dd&gt;Free&lt;/dd&gt;
                      &lt;dt&gt;Cost :&lt;/dt&gt;&lt;dd&gt;1&lt;/dd&gt;
                      &lt;dt&gt;Attack :&lt;/dt&gt;&lt;dd&gt;1 &lt;img src="icons/attack.png" alt="Attack Icon" width="10px" height="12px"&gt;&lt;/dd&gt;
                      &lt;dt&gt;Durability :&lt;/dt&gt;&lt;dd&gt;3 &lt;img src="icons/Health.png" alt="Attack Icon" width="10px" height="12px"&gt;&lt;/dd&gt;
                      &lt;br&gt;
                      &lt;dt&gt;Ability :&lt;/dt&gt;&lt;dd&gt;Taunt&lt;/dd&gt;
                      &lt;dt&gt;&lt;/dt&gt;&lt;dd&gt;Taunt&lt;/dd&gt;
                  &lt;/dl&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>