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

Rebecca Broughton
Rebecca Broughton
3,876 Points
Posted by Rebecca Broughton
Rebecca Broughton
3,876 Points

CSS custom grid navbar

I'm creating a profile site and set up a simple 12-column custom grid. I'm trying to set the navbar to take up 100% width with no margins but for some reason it's still showing a small margin on all sides. I can't figure out what's going wrong here..

This is the html

<body>

    <div class ="row top">
        <div class = "column-7">
            <h1 >Rebecca Broughton</h1>
            <img src = "PaintBrushIcon.svg"></img>
        </div>


        <div class ="nav">
            <ul>
                <li class ="column-1"><a href ="">Portfolio</a></li>
                <li class ="column-1"><a href ="">About</a></li>
                <li class ="column-1"><a href ="">Contact</a></li>
            </ul>
        </div>
    </div>

and the relevant CSS

.row {
    width:100%
    height:0px;
    margin:0px;
    display: table ;
     clear:both;
}

[class^="column-"] {
    width:100%;
    margin:0px;
}


.top{
height: 110px;
background-color: black;
margin:0px;
}

.nav{
    height:0px;
}

.top h1{

    font-family: AvenirNextCondensed-Bold;
    font-size: 40px;
    color: #FFFFFF;
    letter-spacing: 1px;
    margin: 35px 0px 0px 30px;
    display:inline-block;
}

.top img{
    margin:40px 0px 0px 20px;
    display:inline-block;
    height:35px;
}

.nav a{
    display:inline-block;
    list-style: none;
    text-decoration: none;
    font-family: AvenirNextCondensed-Regular;
    font-size: 26px;
    color: #FFFFFF;
    letter-spacing: 0.75px;
    margin:40px 0px 0px 0px;
}

1 Answer

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

Hi Rebecca,

It looks as though you are missing a semi colon in your .row rule (at the end of width: 100%)

.row {
     width:100%;
     height:0px;
     margin:0px;
     display: table ;
     clear:both;
}
Rebecca Broughton
Rebecca Broughton
3,876 Points
Rebecca Broughton
Rebecca Broughton
3,876 Points

woops! didn't catch that. turns out the problem was just a margin around the <html>. This fixed it:

body{ margin:0px; }

Thank you for finding that though!