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

General Discussion

Gonzalo Sanchez Sarmiento
Gonzalo Sanchez Sarmiento
909 Points
Posted by Gonzalo Sanchez Sarmiento
Gonzalo Sanchez Sarmiento
909 Points

Can't assign background color and center a <div>

Hi, I have this code, and:

  1. I can't get the #header div change background-color as I did with #intro
  2. I can't make #intro full-width
  3. I can't center #content

http://codepen.io/anon/pen/oAnfq

--

Mod Note: I edited out the large block of code in place of your codepen

4 Answers

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

It'd be much easier to offer some help if you put this into codepen. Without that, I have a feeling the obvious replies you'll get are the things you've already tried on your own.

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Much better, thanks. Personally, I had no idea this looked so good.

Okay, from the grid css you're using, each grid width is relative to a container div with the class .container . So to use this grid, wrap everything in your html body with the div class="container". (Then remove class="container" from anywhere else in the html.)

I could be wrong, but It doesn't look like you're using the div.header_container for anything. You can just use the div.header for that. So if it were me, I'd just change div class="header_container" to div class="container" then close that div at the end of the body instead of where it's closed now.

Next, in the grid css file, your clearfix has the class .cf . So either change that to .clearfix or change class="clearfix" to class="cf" in your html.

I think that'll get you going. When I did that, I was able to style #header. http://codepen.io/GaryMann/pen/zoshm

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> I could be wrong, but It doesn't look like you're using the div.header_container for anything.

The reason appears to be that the children of header_container are floated, if you float header_container will contain content again.