Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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!