First Bootstrap project, how do I make container widths equal?

Question

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 here to see what I am talking about.

I built the grid first and then attempted to create my own styles in a file called style.css.

What I have tried to do is create a class like so:

.container .no-padding-lr {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

and apply it to my markup:

<div class="col-sm-12 no-padding-lr">
   <h1 class="intro">Your online Canadian-built Pontiac, Acadian, and Beaumont Resource.</h1>
   <img class="img-responsive img-rounded no-padding-lr" src="assets/images/DSCN8314.JPG" alt="pontiac header" />
</div>

As you can see it is only widening maybe 50% of what is required.

How can I adjust it so the content is all in line with one another?

Answer 1

You need to wrap all the col-- divs with a <div class="row">.

Quoting the relevant bootstrap docs:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.