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
Learning coding
Front End Web Development Techdegree Student 9,937 PointsHow do i get the orange / red color into the background?
The question as in the subject :). I targeted the whole container to have this background color, but only the line in portfolio got this color.
If I know how to do this I will likely understand the solution.
1 Answer
Steven Parker
243,318 PointsThis is a case of "margin collapse".
Just to be clear, this container holds only the "Portfolio" heading:
<div class="container2" id="port">
<h2 class="title">Portfolio</h2>
</div>
But you may be expecting to see a bit more color on the margins of the heading. But due to margin collapse only the heading line itself gets the color.
There are many ways to prevent margin collapse (see this MDN article or this CSS Tricks article for more information), but one easy one is to add a tiny little bit of vertical padding:
.container2 {
background-color: #fc4a1a;
padding: 0.1px 0;
}
Mitch Benes
5,289 PointsMitch Benes
5,289 PointsSo, looking at the code, it seems all of .container2 is orange. If you look at the inspect tools, .container2 has very few styles on it and only has the <h2> element in it. If you want to make it larger, just add some padding to the class and it should work out. Just remember that margin propagates outside of the container and padding is inside.