Align left dl-horizontal, dt, and dd

Question

I am working inside a panel and am not able to left align or remove the margins for a horizontal list in Bootstrap.

i.e.

<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">
        <strong>testing</strong>
      </h3>
    </div>
    <div class="panel-body">
      <dl class="dl-horizontal">
        <dt>term 1</dt>
        <dd>foo</dd>
        <dt>term 2</dt>
        <dd>bar</dd>
      </dl>
    </div>
  </div>
</div>

https://jsfiddle.net/srzyL86g/

Answer 1

Solved here . https://jsfiddle.net/adityap708/9k0qg8jn/

.container dt,.container dd {
  width:auto;
  margin-left:auto;
  display:inline-block;
}

Add this to your css. Boostrap is giving dt and dd width and margin you need to overwrite it.