Bootstrap aligning h2 and accordion - html

Question

I have a sidebar on the right that uses 3 elements of a bootstrap grid. I am trying to have the content always to the right of this sidebar (so they must always take up 9). I currently have an accordion and an h2, however I am having a difficult time left-aligning them with the rest of the content on the page. The sidebar is coded as follows:
<div class="col-md-3">
<div class="list-group">
example
</div>
</div>
Each "content div" is as follows (these are aligning properly)
<div class="col-md-9 pull-right">
<div class="panel panel-default">
<div class="panel-heading">
<h4>title</h4>
</div>
<div class="panel-body">
<p>content</p>
</div>
</div>
</div>
This is the h2 and accordion that isn't properly aligning with the content.
<div class="col-md-9 pull-right">
<div class="row">
<div class="col-md-12">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading together">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What We Can Do Together</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>list</li>
</ul>
</div>
</div>
</div>
Image to help visualize the problem
without pull-right

Answer 1

Remove the pull-right from the classes list:
<div class="col-md-9 pull-right">
<!-------------------^^^^^^^^^^ This is the culprit to pull it to the right.
The pull-right class just adds float: right !important; to the styles, which make the content to be pushed right.