Placing of panels next to each other

I am wanting to line two panels up alongside each other.

I currently have one panel (12 wide) which is above and I want two panels to sit below it next to each other to be 6 wide) however the second panel won't line alongside the first panel:

HTML

.panel-heading {
  background: #666;
  color: #FF7800;
  font-family: sans-serif;
}
.panel-body {
  background: #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Panel Conent
      </div>
    </div>
  </div>
</div>
</div>

I have tried floating the panel left but this has no effect, any help would be great. Thanks


You need to use only one container

<div class="container">
    <div class="row">
        <div class="col-sm-12">
                <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">
                Panel Conent
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="panel-heading">Panel Heading</div>
            <div class="panel-body">
                    Panel Conent
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel-heading">Panel Heading</div>
                <div class="panel-body">
                Panel Conent
            </div>
        </div>
    </div>
</div>