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

Posted by Stu Cowley
Stu Cowley
26,287 Points

How do I center an image to a container when using a grid system??

Hey guys,

So I have been put in charge of developing my wife's day spa web site and I am having some problems with aligning Flexbox perfectly in the center of a container that I have named ""contentArea""

I am using the ""grid.css"" that was included in the Smells Like Bakin' web site project.

Here is a link to what I currently have. As mentioned above I would like the flex box to be placed in the center of the ""contentArea"" which uses the ""grid_12"" class. Don't worry those images that appear on the flex slider aren't final we've hired a pro photographer to do the shots.

I would really appreciate any advice on how I could go about this as I am stumped.

Many thanks

Stu :)

5 Answers

Matthew Reed
PLUS
Matthew Reed
Courses Plus Student 17,986 Points
Matthew Reed
Matthew Reed
Courses Plus Student 17,986 Points

You have to take the grid_11 class off of the flexslider div. It's causing it to float left. Then add this to your css

.flex-viewport {
    width: 880px;
    margin: 0 auto;
}
Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

You Matthew are an absolute champion! I have been stressing over this so much!

This solved the problem perfectly, thank you!

Stu :D

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

I do have one more question that I 100% that you'll be able to help me with Matthew looking at your impressive amount of points.

How does one make a background color for lets say grid_12 fill 100% of the browser width, this is the next problem that I'm having at the moment.

Thanks

Stu :)

Matthew Reed
PLUS
Matthew Reed
Courses Plus Student 17,986 Points
Matthew Reed
Matthew Reed
Courses Plus Student 17,986 Points

No problem, Stu. I'm glad I could help. If you want it the background color you will 100% of the browser you just have to apply it to the body or something eles that is 100%. I'm guessing your grid container is not 100% width. I would maybe put a div around it and give it the background color you want.

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

Thanks again Matthew,

That works a treat, thanks for your quick response too btw :)

Stu