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 Gabriel E
Gabriel E
8,916 Points

Having problems with getting page header in the right place.

For some reason, my header just won't go flush with the top of my browser. There's a big white space above it, and I'm pretty sure I'm doing exactly as Nick was. Here is my code, some of it is slightly changed, but I don't think in any way that would affect the header.

/******** 
GENERAL
********/

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

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

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/***********
HEADING
***********/

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

#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Poppins', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-family: 'Changa', sans-serif;
    font-size: 1em;
    margin: -5px 0 0;
    font-weight: normal;
}

h3 {
    font-size: 2em;
    font-weight: normal;    
}

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

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

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

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc; /* A very light gray */
}

/***********
PAGE: HOME
***********/

/* use this tab for images exclusive to home page */

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

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

a {
    color: #008080;
}

header {
    background: #008080;
    border-color: #003434;
}

h1, h2 {
    color: #fff;
}

nav {
    background: #006767;    
}

nav a, nav a:visited {
    color: #fff;
}

nav a.selected, nav a:hover {
   color: #999; 
}
Erik Nuber
Erik Nuber
20,629 Points

In this particular case, I know it has to do with padding or margin but, if you could share your actual workspace it would make it easier and quicker to actually find.

To do so, click on the little camera icon in top right corner of your workspace. It will walk you thru from there.

Gabriel E
Gabriel E
8,916 Points

OK, well I didn't work in workspaces. I'm using Brackets. But I'll try to put it in a workspace I guess.

Gabriel E
Gabriel E
8,916 Points

https://teamtreehouse.com/workspaces/19292712#

Here we go! I included both css files, norm. and main, as well as my index.

Erik Nuber
Erik Nuber
20,629 Points

The link doesn't work. if you are working in brackets, can you send the preview of your site? I am not sure if that will work but, just copy and paste the url. I can look at it and make changes in the console. But again, not sure if that will work since it isn't a live site.

Gabriel E
Gabriel E
8,916 Points

Ah OK, let me see. http://127.0.0.1:63880/index.html I checked the link and it worked on my end.

Gabriel E
Gabriel E
8,916 Points

I'm just not sure if it'll take you to the sight or not. I tried it again and it got a little unstable. Sometimes it would take me there, and sometimes it wouldn't.

Gabriel E
Gabriel E
8,916 Points

Ok, sorry for the continuous posting, but I finally got it fixed! It's flush with the top of the browser, but for some weird reason, If I try to add anything in my <section> tags, (as shown on the above code) it gets all screwed up again and becomes "un-flush" with the top. Any ideas?

Thanks, G

4 Answers

Erik Nuber
Erik Nuber
20,629 Points

Here is the nav I used on my site. Hopefully it will help you figure out what is going on with yours. I used media queries as at small screen I built it for columns and as it gets bigger, it goes across the screen. 

nav {
    text-align: center;
    padding: 10px 0;
    margin: 30px 0 25px;
    font-size: 1.55em;
    background: #751935; /*burgandy*/
    box-shadow: 0px 3px 10px #000;
    }

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav a, nav a:visited {
    color: white;
    }   

nav a.selected, nav a:hover {
    color: yellow;
    }   

nav li {
    padding: .15em;
    margin: .20em;
}

nav a {
    font-weight: 400;
    padding: 5px 30px;
}

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

        nav li {
            display: inline-block;    
            padding: .25em .25em;
            margin: .2em .1em;
        }

        nav a {
            padding: .8em .7em;
            margin: 0;
        }

        nav {
            font-size: 1.3em;
        }

}

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

        nav {
            font-size: 1.4em;
        }
}
Gabriel E
Gabriel E
8,916 Points

Ok, that definitely helped! Thank you!

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

check out vertical margin collapse

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Ok, I just watched the video and matched your code, the only thing I don't see here is

nav ul {
   list-style: none;
   margin: 0 10px;
  padding: 0;

}

nav li {
   display: inline-block;
}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

if you have the bar going underneath your nav section you need to change to this...

header nav {
    text-align: center;
    padding: 10px 0px 0px ; 
    margin: 20px 0px 0px;
}

for bar above the header try adding to the padding of the header.

I apologize without editable code, it is hard to just look and figure it out.

Gabriel E
Gabriel E
8,916 Points

OK, thanks a ton. Unfortunately that's the code in the next video, so we're not there yet. My mistake is somewhere in the video just before the one you watched. I'll try working it out.

Thanks!

Gabriel E
Gabriel E
8,916 Points

Well now wait, I found something sort of interesting. When I hover over my index.html h3 element in brackets, it highlights not only the h3 element, but everything all the way up to the top of the header banner. Did I just customize my page a little to far from what I was supposed to do in the video? (I've already done the course so I just wanted to create a new site).