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

Design Prototyping in the Browser Page Layout Defining Content Areas

Posted by Oriana Espinoza
Oriana Espinoza
1,078 Points

I made the styles changes in the 6:21 min and the changes doesn´t apply.

header { padding: 2rem 0; }

.featured { height: 500px; background: #F99; margin-bottom: 2rem; }

.profile-info img { max-width: 6rem; max-height: 6rem; border-radius: 1rem; }

2 Answers

Jack Cummins
Jack Cummins
17,417 Points
Jack Cummins
Jack Cummins
17,417 Points

It must be that you're using a different browser than him.

Jack Cummins
Jack Cummins
17,417 Points
Jack Cummins
Jack Cummins
17,417 Points

Whoops. That actully couldn't be correct.

Gemz Nunn
Gemz Nunn
16,296 Points
Gemz Nunn
Gemz Nunn
16,296 Points

I had the same issue. It turned out I hadn't closed a CSS property correctly, so double-check your code for missing semi-colons.

I also adapted to code slightly to use Bootstrap's spacing (mb-4) rather than creating a new margin-bottom property in .featured, like this:

          <!-- featured -->
        <section class="featured mb-4"> </section><!-- /featured -->

My CSS now looks like this:

.featured {
    height: 500px;
    background: #EEE;
}