title: First Bootstrap project, how do I make container widths equal?
body: <p>student here working on one of my final projects. First time using Bootstrap. I am having difficulty making my content match the same width as my navigation. You can see the project live <a href="http://www.hardcoded.ca/cp/html/" rel="nofollow">here</a> to see what I am talking about.</p>
  
  <p>I built the grid first and then attempted to create my own styles in a file called <strong>style.css</strong>. </p>
  
  <p>What I have tried to do is create a class like so:</p>
  
  <pre><code>.container .no-padding-lr {
      padding-left: 0px;
      padding-right: 0px;
      margin-left: 0px;
      margin-right: 0px;
  }
  </code></pre>
  
  <p>and apply it to my markup:</p>
  
  <pre><code>&lt;div class="col-sm-12 no-padding-lr"&gt;
     &lt;h1 class="intro"&gt;Your online Canadian-built Pontiac, Acadian, and Beaumont Resource.&lt;/h1&gt;
     &lt;img class="img-responsive img-rounded no-padding-lr" src="assets/images/DSCN8314.JPG" alt="pontiac header" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see it is only widening maybe 50% of what is required. </p>
  
  <p>How can I adjust it so the content is all in line with one another?</p>