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

Posted by brandonlind2
brandonlind2
7,823 Points

Why cant I remove the margin from my h1 one tag main-header-title in the header?

If I give it a margin of 0 in the stylesheet its just ignore and it still has a margin of 54.297. I noticed that if I set it to display inline, it still has margin just not as much????

 <h1 class="main-header-title"> Store</h1>
   <nav>
    <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="clothes.html">Clothes</a></li>
    </ul>
   </nav>
  </header>

.main-header-title {
    margin: 0;
    font-size: 3em;
    }
brandonlind2
brandonlind2
7,823 Points 
html {
    width: 1000px;
    font-size: 1em;
}

img {
    max-width: 100%
}

* {
    box-sizing: border-box;
}

body { background-color: orange;
        padding: 0;
    margin: auto;
        max-width: 100%;

}

header {
    background-color: lightgrey;
    text-align: center;
    margin:  auto;
    max-width: 100%;
}

.main-header-title {
    margin: 0;
    font-size: 3em;
    }

nav { 
    font-size: 1.5rem;
    padding: 0;
    margin: auto;
    max-width: 100%;
}

nav ul{
    border-top: 1px solid lightgrey;
        text-align: center;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
}

nav li {
    border: 1px solid lightgrey;
    background-color: orange;
    text-align: center;
    padding: 0;
    margin: auto;
    max-width: 100%;
    list-style: none;
}

nav li a { color: white;
       text-decoration: none;
}

nav a:visited {
    color: white;
}   

section {
    margin: auto;
    padding: 0;
    max-width: 100%;
    }

.main-products li {
    text-align: center;
    list-style: none;

    }

footer { 
    clear: both;
    text-align: center;
    margin: auto;
    padding: 0;
    max-width: 100%;
}

footer li { 
    max-width: 100%;
    margin: auto;
    padding: 0;
    list-style: none;
    display: inline-block;
}

footer li a {
    text-decoration: none;
}

.clear:after {
    content="";
    clear: both;
    display: table;
}


/************
responsive
************/

@media screen and (min-width: 300px){



}

@media screen and (min-width: 600px){
    .main-header-title {
        text-align: left;
        margin: 5% 10%;
        font-size:
    }

    nav ul {
        margin: 0 5% 0 0;
        text-align: right;
       }
    nav li {
        border-radius: 0 0 0 7px;
        margin: 0 -5px;
        padding: 2px 10px;
        display: inline-block;
}

.main-products li {
    float: left;
    width: 20%;
    margin: 2.5%;   
    }



}

update I added normalize but still not working

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher 
@media screen and (min-width: 600px){
    .main-header-title {
        text-align: left;
        margin: 5% 10%;
        font-size:
    }

This is overwriting your clear, I think :)

Steve Hunter
Steve Hunter
57,712 Points

Good shout. :+1:

brandonlind2
brandonlind2
7,823 Points

thanks lol

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

Your h1 is inside the header element, I think. Is there something styling the header element that overrides the h1?

Steve.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Steve Hunter I agree. Something is writing over it. I don't know whether or not it's the h1 element that has a style on it or if it's a browser default because normalise.css isn't loaded. I think we're going to need to see all the code. And good point.... it is inside a header element. So there could be something there as well.

Steve Hunter
Steve Hunter
57,712 Points

I agree with you completely!! :+1:

brandonlind2
brandonlind2
7,823 Points

I don't think so, wouldnt css on a h1 tag that is inside a header override the header, since its more specific? header { background-color: lightgrey; text-align: center; margin: auto; max-width: 100%; }

Steve Hunter
Steve Hunter
57,712 Points

Something's doing it, so let's explore everything. Have you normalized the page, as Jennifer suggested?

Can we see the code in full - is it in GitHub?

Steve Hunter
Steve Hunter
57,712 Points

Try commenting out the margin: auto; line in the header selector - see what that does.