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

Header[nav] gap

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

1 Answer

Martin Jones
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Martin Jones
Front End Web Development Techdegree Graduate 43,232 Points

Add a float to the wrapper, this will then get rid of the gap at the top of the page.

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

I might be missing some CSS looking at the HTML, if you get stuck further, post a the other CSS or a link to code pen and I can help further :)

Case close .Thanks a lot Martin!