Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Margaret Johnson
Margaret Johnson
4,275 Points
Posted by Margaret Johnson
Margaret Johnson
4,275 Points

Cannot get left column correctly adjusted.

I do not understand how to get a column to be flush left when the display is large or greater...it looks weirdly set out to the right.. What should i be doing differently? The following Bootstrap 4 HTML has an overly wide left hand column, no matter what I set for the column size:

<div class="container">
        <div class="row">
          <div class="col-2" style: "background:green">
            <img class="profile-photo" src="img/HappyDay_about.jpg" alt="Biggest Greenie About picture">
          </div>
            <div class="col">
              <h5>Blah blah</h5>
              <p>and more blah blah.....
              </p>
            </div>
          </div>
        </div>
Matthew Potter
Matthew Potter
8,718 Points

(```html) take off parenthesis

enter code here

(```) take off parenthesis

This will help us see your code and see what you are doing. also attach the css the same way

2 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

For your inline style to work, you need an equal sign ("=") between the word "style" and the quoted CSS string instead of the colon and space.

But the effect you describe in your main question doesn't seem to be caused by this code. Is there an associated CSS file involved? If possible, make a snapshot of your workspace and post the link to it here.

Margaret Johnson
Margaret Johnson
4,275 Points
Margaret Johnson
Margaret Johnson
4,275 Points

Thank you. Here is an image

note...i don't use any additional css other than bootstrap 4....

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Bootstrap .. that explains it ! Bootstrap adds quite a lot of CSS! But as explained in the Bootstrap documentation:

Containers provide a means to center your site’s contents. Use .container for fixed width or .container-fluid for full width.

So make your top line:

<div class="container-fluid">
Margaret Johnson
Margaret Johnson
4,275 Points
Margaret Johnson
Margaret Johnson
4,275 Points

THANK YOU. Yes indeed. container-fluid .... i kept trying img-fluid. container-fluid makes more sense.