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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Brian Besler](https://secure.gravatar.com/avatar/014c017c692918ab6ae3df764487504e?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Brian Besler
11,493 PointsProblem with the activity of adding nav and the 3rd column.
For some reason i can get the look to be right when doing exactly what Guil does when adding the third column and putting in nav but cannot get the actual color or the name of the element to appear for the nav on the left side--the size is right--the look is just white though for that element...I have tried re naming it something else, adding different element etc. Get same result. Anyone else have this problem?
![Kameron Johnson](https://uploads.teamtreehouse.com/production/profile-photos/1659482/micro_kj.jpg)
Kameron Johnson
11,932 PointsDoesn't work for me either. Basically the nav doesn't want to span down to the 3rd row for the 992px media query even though it is properly labeled in grid-template-areas:
@media (min-width: 992px) {
.container {
grid-template-areas:
"header header header"
"nav main aside";
"nav footer footer";
}
}
Leaves a blank white space bottom left. However, "footer footer footer" will spread across the third row.
![Dora Tokai](https://uploads.teamtreehouse.com/production/profile-photos/8001792/micro_kyo_on_the_roof.jpg)
Dora Tokai
16,003 PointsHi,
Kameron Johnson's code is not working because of the unnecessary semicolon after "nav main aside". I don't know the solution to Brian Besler's problem, sorry.
2 Answers
![Iain Simmons](https://secure.gravatar.com/avatar/89ea1833e0ffaf51eb0ef0cf15fa3203?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Iain Simmons
Treehouse Moderator 32,305 PointsIf you look at page.css
in the workspace, Guil has added some background colours for specific elements, one of which is the nav
element. Any other direct children will have a white background:
.container > * {
color: #fff;
}
nav {
background-color: #fbaea8;
}
Make sure in your index.html
you added the following:
<div class="container">
<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>
Where this is the new line added (it's important that it has at least some content/text):
<nav>Nav</nav>
![Glenré Charl Labuschagné](https://secure.gravatar.com/avatar/6f7e414900e96c081632645abdb7505c?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Glenré Charl Labuschagné
23,204 PointsI had the same issue but forgot to assign the nav area css (at the beginning) in grid.css. Simple blunder but might be helpful for somebody else…
nav {
grid-area: nav;
}
![Erik Biebinger](https://uploads.teamtreehouse.com/production/profile-photos/11591949/micro_https---bucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com-public-images-406dc61f-32b6-4741-82e4-524bc75c0431_568x566.jpg)
Erik Biebinger
7,299 PointsA had this missing too. So I assign the nav area like you did and it worked with the last media query. But I wonder, why the 2nd media query was working for me, tho I havend added the nav { into my css before.
I mean: When
nav {
grid-area: nav;
}
is commented out, everything works but the last media query. Only with this added into the CSS all media queries work.
I am just curious, why this is the case.
![Jeremy Anderson](https://secure.gravatar.com/avatar/c41f7d85297b56ed23d12ea532a4c208?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Jeremy Anderson
20,005 PointsI know this comment is old, but I just wanted to say thanks! It just solved my problem, almost five years later, haha.
M Glasser
10,868 PointsM Glasser
10,868 PointsMaybe try posting your code here so we can try and see where you've gone wrong?