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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Srdjan Cestic
Srdjan Cestic
6,855 Points
Posted by Srdjan Cestic
Srdjan Cestic
6,855 Points

Space

I have problem with space between picture and header, I paste code from video but my picture is still stick to header without any space.

I don't get idea how to fix that.

18 Answers

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Srdjan,

it's almost right.

You did just one thing wrong.

You need this:

html {
padding: 0; 
margin: 0;
}

to be above:

body {
padding: 0;
margin: 0;
}

currently you html below body in your css.

Try that.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Srdjan,

can I see all your code please?

Thanks

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

And your HTML too please :)

Also when posting code you need to do this so it looks readable:

write 4 backticks like this ```` followed by the language.

So if you paste HTML:

```` and then write HTML after with no spaces.

and then paste your code

and then write 4 more backticks after your code.

Thanks Joe

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points 
GENERAL
*********************/
/* site body*/
body {
  background-color: #fff;
  color: #999;
  margin: 0;
}

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

a {
  text-decoration: none;
  color: green;
}

img {
  max-width: 100%;
}

/*********************
PAGE: ABOUT
*********************/

.profile-picture {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  clear: both;


}




h3 {
  margin: 0 0 5% 0;
}



.selected {
  color: green;
}
/*********************
HEADING
*********************/
#logo {
  text-align: center;
  margin: 0;
}
header {
  float: left;
  margin: 0%;
  padding: 0%;
  width: 100%;
  background-color: #6ab47b;
  border-color: #599a68; 
}
h1, h2 {
  color: #fff;
}
h1 {
  margin: 20px 0;
  font-family: 'Changa One' , sans-serif;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-weight: normal;
  font-size: 1em;
  margin: -5px 0 0;
/*********************
NAVIGATION
*********************/
}
nav {
  background-color: #599a68;
  text-align: center;
  padding: 10px 0;
  margin-top: 30px;
}
nav a {
  color: #fff;
  font-weight: 800;
  padding: 10px 10px;
}
nav ul  {
  margin: 0;
  list-style-type: none;
}
nav li {
  display: inline-block;
}
nav a:hover {
  color: #32673f;
}

/*********************
FOOTER
*********************/
footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  clear: both;
  color: #ccc;
}
.social {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}
/*********************
PAGE:PORTFOLIO
*********************/
#gallery {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#gallery li {
  float: left;
  width: 40%;
  margin: 5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
#gallery li a p {
  font-size: 0.75em;
  color: #ccc; 
  margin: 0;
  padding: 5%;
}````
Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

````<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> 

</header>
<section>

  <img src="img/nick.jpg" alt="Nick photo" class="profile-picture">


  <h3>About me</h3>
  <p>Hi, I'm Nick and I am designer and this is my favourite work.In my free time I love to exercise, play video games and drink good coffee.</p>
  <p>If you would like to follow me on twitter, you can do this here<a href="http://twitter.com"> @nickpr</a>.</p>



</section>
<footer>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social"></a>
      <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social"></a>
      <p>&copy; 2014 Nick Pettit.</p>
 </footer>

</div> </body> </html>````

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Srdjan,

ok so there's a few problems which I noticed in the code :)

  1. You don't appear to have included 'body' after your 'head' and at the end of your HTML file. You must have this in every HTML file.

I've included this now.

  1. You had a 'float: left;' on your header. Maybe Nick did this in the course but I'm not sure. You didn't need it.

To get the space I just then added some padding to your 'section' element which the 'img' was inside. So you then had space.

  1. You should read up on 'CSS resets'. They basically reset all padding and margin to 0 which helps you style everything how you like. Otherwise you can have spacing problems on elements.

For e.g. Your body will have padding and margin added to it if you don't specify padding: 0 and margin: 0;. I know you removed the margin, but you need to remove the padding too.

Read on that :)

Some other things but I don't want to confuse you, it will come naturally as you work through the courses.

Don't worry too much for now, things will become clearer as you go through the courses.

Any questions let me know!

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <title>Nick Pettit | Designer</title>
  <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
 </head>

 <body>

  <header>
    <a href="index.html" id="logo">
     <h1>Nick Pettit</h1>
     <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="about.html" class="selected">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

  </header>
  <section>

    <img src="img/nick.jpg" alt="Nick photo" class="profile-picture">


    <h3>About me</h3>
    <p>Hi, I'm Nick and I am designer and this is my favourite work.In my free time I love to exercise, play video games and drink good coffee.</p>
    <p>If you would like to follow me on twitter, you can do this here<a href="http://twitter.com"> @nickpr</a>.</p>

  </section>
  <footer>
        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social"></a>
        <p>&copy; 2014 Nick Pettit.</p>
   </footer>

    </body>
    </html>

GENERAL
*********************/
/* site body*/

html {
    padding: 0;
    margin: 0;
}
body {
  background-color: #fff;
  color: #999;
  margin: 0;
  padding: 0;
}

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

a {
  text-decoration: none;
  color: green;
}

img {
  max-width: 100%;
}

/*********************
PAGE: ABOUT
*********************/

section {
    padding: 20px 0;
}

.profile-picture {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  clear: both;


}




h3 {
  margin: 0 0 5% 0;
}



.selected {
  color: green;
}
/*********************
HEADING
*********************/
#logo {
  text-align: center;
  margin: 0;
}
header {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #6ab47b;
  border-color: #599a68;
}
h1, h2 {
  color: #fff;
}
h1 {
  padding: 20px 0;
  margin: 0;
  font-family: 'Changa One' , sans-serif;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-weight: normal;
  font-size: 1em;
  margin: -5px 0 0;
/*********************
NAVIGATION
*********************/
}
nav {
  background-color: #599a68;
  text-align: center;
  padding: 10px 0;
  margin-top: 30px;
}
nav a {
  color: #fff;
  font-weight: 800;
  padding: 10px 10px;
}
nav ul  {
  margin: 0;
  list-style-type: none;
}
nav li {
  display: inline-block;
}
nav a:hover {
  color: #32673f;
}

/*********************
FOOTER
*********************/
footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  clear: both;
  color: #ccc;
}
.social {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}
/*********************
PAGE:PORTFOLIO
*********************/
#gallery {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#gallery li {
  float: left;
  width: 40%;
  margin: 5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
#gallery li a p {
  font-size: 0.75em;
  color: #ccc;
  margin: 0;
  padding: 5%;
}
Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Srdjan,

appears Treehouse is having some problems displaying the code at the moment.

Bare with me!

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

Thanks Joe.

I add body margin and padding to zero. When I remove float: left; on header I have space between header and windows/browser I don't know how to say that. I add padding: 20px 0; to section but nothing changed.

So you said that if I set padding and margin 0 to body, I will reset all default space in my webpage? Nick in his video often set margin and padding to 0 just to remove default spacing.

I still can't set space between pictures and header, it's so frustratingly.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

ok Srdjan,

do this also:

html {
padding: 0;
margin: 0;
}

that will remove the space between the header and windows/browser.

After you done that, if it still isn't working send me your code again.

Thanks

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

I add padding-top: 5% to picture but now I have problem border-radius, bottom corners of picture are ok, but top corners aren't, they have some strange corners. When I remove float: left on header this also appear (I mentoin this is comment above)

http://port-80-jm8otu7zjd.treehouse-app.com/about.html

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Also do this:

 h1 {
    padding: 20px 0;
    margin: 0;
    font-family: 'Changa One' , sans-serif;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}
Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

You have space above your header because this 'h1' had 'margin: 20px 0'. Use padding instead.

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

I add html padding and margin to zero and there is still space, when I set float: left on header everything is fine.

Here is my code, and the result is link above. 

GENERAL
*********************/
/* site body*/
body {
  background-color: #fff;
  color: #999;
  margin: 0;
  padding: 0;
}
html {
  padding: 0;
  margin: 0;
}


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

a {
  text-decoration: none;
  color: green;
}

img {
  max-width: 100%;
}

/*********************
PAGE: ABOUT
*********************/

.profile-picture {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  clear: both;
  padding-top: 5%;


}




.selected {
  color: green;
}
/*********************
HEADING
*********************/
#logo {
  text-align: center;
  margin: 0;
}
header {

  margin: 0%;
  padding: 0%;
  width: 100%;
  background-color: #6ab47b;
  border-color: #599a68; 
}
h1, h2 {
  color: #fff;
}
h1 {
  margin: 20px 0;
  font-family: 'Changa One' , sans-serif;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
  font-weight: normal;
  font-size: 1em;
  margin: -5px 0 0;
/*********************
NAVIGATION
*********************/
}
nav {
  background-color: #599a68;
  text-align: center;
  padding: 10px 0;
  margin-top: 30px;
}
nav a {
  color: #fff;
  font-weight: 800;
  padding: 10px 10px;
}
nav ul  {
  margin: 0;
  list-style-type: none;
}
nav li {
  display: inline-block;
}
nav a:hover {
  color: #32673f;
}

/*********************
FOOTER
*********************/
footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  clear: both;
  color: #ccc;
}
.social {
  width: 20px;
  height: 20px;
  margin: 0 10px;
}
/*********************
PAGE:PORTFOLIO
*********************/
#gallery {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#gallery li {
  float: left;
  width: 40%;
  margin: 5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
#gallery li a p {
  font-size: 0.75em;
  color: #ccc; 
  margin: 0;
  padding: 5%;
}````
Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

I paste your code to h1 but still not working. So frustrating...

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

Great, it works! So when I set html and body margin and padding to zero, first html then body, that will reset al default padding and margin in browser?

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

No just for html and body. Other elements will stay have padding like h1, h2 etc.

I use this for all my projects:

https://necolas.github.io/normalize.css/

This will reset padding and margin for almost all your elements.

  1. Press download.
  2. Copy all of the CSS it shows
  3. Add to an empty file and save it as 'normalize.css'
  4. Add a link to it in your head ABOVE your other css files. It has to be above or it will overwrite your other CSS files.
Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

I do it.

Thanks Joe a lot, you really help me.

Regards

Pao Alcantara
Pao Alcantara
1,633 Points
Pao Alcantara
Pao Alcantara
1,633 Points

Hi! This css code worked for me:

#wrapper { clear:both; padding:30px 5% 0; }

the div element is referencing the topmost of the site so margin and padding does not work (except when you set margin or padding at high pixels like 200px above). What I did was I cleared the div to set its reference below the navigation, and set a top padding of 30px. Hope this helps.

J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points
J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

I had the same issue; the above code worked for me too. Thanks Pao.