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

Problem at the nav

Hi guys i have a problem at the top of my header https://ibb.co/Dzpm7tP I don't understand why...

body{
font-family: 'Open Sans',sans-serif;
}

#wrapper {
    max-width: 948px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

img{
    max-width: 100%;
}

h3{
   margin:0 0 1em 0;
}

/******************************
HEADING
******************************/
header{
    margin:0 0 30px 0;
    padding: 5px 0 0 0;
    width:100%;
    float:left;
}

#logo {
    text-align: center;
    margin:0;
}
h2{
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}
h1 {
    font-family: 'Changa One', sans-serif;
    margin:15px 0px;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

/******************************
NAVIGATION
******************************/

nav {
text-align: center;
padding: 10px;
margin:20px 0 0;
}
nav ul {
    list-style: none;
    margin:0 10px;
    padding: 0;

}
nav li {
    display: inline-block;
}
nav a {
    font-weight:800;
    padding:15px 10px;

}


/******************************
FOOTER
******************************/

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color:#ccc;
    clear: both;
} 
.social-icon{
    width:20px;
    height:20px;
    margin:0 5px;
}

/******************************
Page Portofolio
******************************/
#gallery {
    margin:0;
    padding: 0;

}

#gallery li{
    float: left;
    width:45%;
    margin:2.5%;
    background-color: #f5f5f5;
    color:#bdc37c;
    list-style: none;
}

#gallery li a p {
    margin:0;
    padding: 5%;
    font-size: 0.80em;
    color:#bdc37c;
}

/******************************
PAGE ABOUT
******************************/
.profile-photo {
    display: block;
    max-width: 175px;
    margin: 0 auto 30px;
    border-radius: 100%;
}

/******************************
Page Contact
******************************/
.contact-info{
    list-style: none;
    padding: 0;
    margin:0;
    font-size:0.9em;
}
.contact-info a{
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding:0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
    background-image: url('../img/phone.png');
}
.contact-info li.e-mail a {
    background-image: url('../img/mail.png');
}
.contact-info li.instagram a {
    background-image: url('../img/twitter.png');
}

/******************************
COLORS
******************************/

/* site body*/
body{
    background-color: white;
    color: #999;
}

/* green header*/
header {
    background:#6ab47b;
    border-color: #599a68
}

/* logo text*/
h1,h2{
    color:#fff;
}

/* links*/
a {
    color:#6ab47b;
}

/* nav background on mobile devices*/
nav {
background: #599a68;
}

/* nav link*/
nav a, nav a:visited{
    color: #fff;
}

/* selected nav link*/
nav a.selected, nav a:hover{
    color: #32673f;
}
@media screen and (min-width:480px) {
/******************************
TWO COLUMN LAYOUT
******************************/

#primary{
width:50%;
float: left;
 }

#secondary{
width: 40%;
float: right;
 }

}

/******************************
PORTOFOLIO
******************************/
#gallery li {
width:28.3333%;

}
#gallery li:nth-child(4n) {
    clear: left;
}

/******************************
PAGE ABOUT
******************************/
.profile-photo{
    float: left;
    margin: 0 5% 80px 0;
}

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

/******************************
HEADER
******************************/
nav {
   background: none; 
   float: right;
   font-size: 1.125em;
   margin-right: 5%;
   text-align:right;

}

#logo{
   float:left;
   margin-left:5%;
   text-align: left;
   width:45%;

}
h1{
    font-size: 2.5em;

}
h2{
    font-size: 0.825em;
    margin-bottom: 20px;
}
header{
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
}

}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Flavius</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
    </head>
    <body>
        <header> 
            <a href="index.html" id="logo">
                <h1>Furnica Flavius</h1>
                <h2>Front-End Developer</h2> 
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">Portofolio</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
            <section id="gallery">
                <ul>
                        <li>
                            <a href="img/numbers-01.jpg">       
                                <img src="img/numbers-01.jpg" alt="">   
                                <p>Experimantation with color and texture</p>
                            </a> 
                        </li>
                        <li>
                            <a href="img/numbers-02.jpg">       
                                <img src="img/numbers-02.jpg" alt="">   
                                <p>Playing with blending modes in photoshop</p>
                            </a> 
                        </li>
                        <li>
                            <a href="img/numbers-06.jpg">       
                                <img src="img/numbers-06.jpg" alt="">   
                                <p>Trying to creat an 80's style of glose</p>
                            </a> 
                        </li>
                        <li>
                            <a href="img/numbers-09.jpg">       
                                <img src="img/numbers-09.jpg" alt="">   
                                <p>Drips created using Photoshop brushes</p>
                            </a> 
                        </li>
                        <li>
                            <a href="img/numbers-12.jpg">       
                                <img src="img/numbers-12.jpg" alt="">   
                                <p>Creatings shapes using repetitions</p>
                            </a> 
                        </li>
                </ul>
            </section>
            <footer>
            <a href="https://www.instagram.com/rotraveller_/"><img src="img/twitter-wrap.png" alt="Twiter Logo" class="social-icon"></a>
                <a href="https://www.facebook.com/FrnFlavius"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
                <p>&copy; 2019 Furnica Flavius.</p>
            </footer>
        </div>
    </body>
</html>

So this is the code i have already normalize.css

4 Answers

Antony .
Antony .
2,824 Points

If you don't mind could you provide your html code too?

okey!

Antony .
Antony .
2,824 Points

This works on my screen, though because I do have a 1366x768 screen could make things look different on your end. Let me know if this doesn't fix it.

header {
    margin: -16px 0 30px 0;
}

body {
    margin:0;
}
Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

That gap is caused by the default margining of the body and h1 elements. It's what is called "margin collapse" which means that when there are two vertical margins that touch each other (nothing to separate them like borders), which ever one has the largest of the size they both take on that size and collapse to one margin. If you inspect the elements with the chrome dev tools you should see that.

You can use a css reset file called normalize.css that removes the default margining from the body to prevent this.

You can simply add a padding top property to your header element to remove it or remove the top margin from the h1.

i have the normalize.css already

Yeap i did ...still didn't solve the problem

I remove the 15px margin......

i had to put float:left to #wrapper ...case close!