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

CSS

Posted by Visal Perera
Visal Perera
9,716 Points

How to achieve full-page-width background color on a div that is 65% of full width and is centered?

I have a webpage that has all of its contents in a div that is 65% of the body class and is centered (lets call this main-content-div). I want a certain segment of my content (a div within the main-content-div) to still be restricted by the same 65% width, however I want its corresponding background color to span the 100% of the body. How can I achieve this?

2 Answers

Cory Harkins
Cory Harkins
16,500 Points

Take into consideration parent elements, and how we can assign multiple classes to specific elements.

It is much easier to give multiple elements the same restrictive class of width, while not modifying the parent element at all.

Here's my codepen to help you. https://codepen.io/CJHARKINS/pen/rYmBrg?editors=1100

Visal Perera
Visal Perera
9,716 Points

Thank You! Greatly helpful :)

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

https://codepen.io/CJHARKINS/pen/rYmBrg