I use the same code for removing the white space on top of the website, but no matter what the space still exists.

Question

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

Answer 1 · 2015-03-17T06:44:43Z

March 17, 2015 6:44am

Okay! I've tracked down the problem(s)!

First, you have quite a few lines that are commented out incorrectly. You need to use asterisks with your forward slashes, like this:

/*** Commented out text ***/

The number of asterisks doesn't matter, but you have to have at least one after the first forward slash and one before the last forward slash.

Secondly, you had quite a few declarations where you had equal signs.

margin:= 0;

margin=0;

Neither of those will work; you must use this format:

margin: 0;

Next (and this was the cause of your white space), several of your selectors were missing. If you are trying to select an ID element, you must have a hash sign before the element. In your case in particular, it seems the #gallery selector was the culprit. If you simply declare

gallery ul li {
  margin: 0;
}

the browser will look for

<gallery>

in your html instead of another element with the ID of "gallery" ID such as:

<div id="gallery"></div>

Your #wrapper element near the top was also missing a hash sign.

In any case, here is the CSS that will fix your issue. It's all your CSS, but I've reformatted it to make it easier to read and added the above corrections. :)

/************************************ 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: 0 0 0 0;
  width: 100%;
}

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

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

h2 {
  font-size: 0.75em;
  margin: 5px 0 0;
  font-weight: normal;
}

/************************************ Footer *************************************/

footer {
  font-size:0.75em;
  text-align:center;
  clear:both; 
  padding-top:50px;
  color:#ccc; }

.social-icon {
  width: 20px;
  height:20px;
  margin:0 5px; }

/************************************ Portfolio *************************************/

#gallery {
  margin: 0;
  padding:0;
  list-style:none;
}

#gallery li {
  float: left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5;
  color:#bdc3c7;
}

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

/************************************ Navigation *************************************/

nav { text-align:center; padding: 10px 0; 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; }

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

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

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

/** This is going to be nav background on the mobile devices **/ nav { background:#599a68; }

h1, h2 { color:#fff; }

a { color: #6ab47b; }

/** This is the color for nav links **/

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

/** Selected nav color **/

nav a.selected, nav a:hover { color: #32673f; }

Have fun coding!

Answer 2 · 2015-03-17T02:39:45Z

March 17, 2015 2:39am

Your declaration of

padding: 5px 0 0 0;

means that you want 5px of padding on top, 0px on the right, 0px on the bottom, and 0px on the left (i.e. it starts on the top and goes clockwise around your element), so that may be why you are having white space at the top. That's the only thing I can think of without seeing the rest of your HTML and CSS.

Answer 3 · 2015-03-18T05:33:26Z

March 18, 2015 5:33am

Ryan

Thank you so much for your answer, I just got it !

Answer 4 · 2015-03-17T02:46:39Z

March 17, 2015 2:46am

Ryan

Thanks for your email. I changed it to
padding: 0 0 0 0; and still I have the white bar. I logged out and login into another browser but still I have the same problem.

Answer 5 · 2015-03-17T04:23:12Z

March 17, 2015 4:23am

Hi Ryan

This is the code I am using but I get a white bar on top of the site.

/************************************ 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: 0 0 0 0; width: 100%; }

logo {

text-align:center; margin:0; }

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

h2 { font-size:=0.75em; margin= -5px 0 0; font-weight:normal; }

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

.social-icon { width: 20px; height:20px; margin:0 5px; }

/************************************ Portfolio *************************************/

gallery {

margin=0; padding:0; list-style:none; }

gallery li {

float: left; width:45%; margin:2.5%; background-color:#f5f5f5; color:#bdc3c7; }

gallery li a p {

margin:0; padding:5%; font-size:0.75em; color:#bdc3c7; }

/************************************ Navigation *************************************/

nav { text-align:center; padding: 10px 0; 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; }

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

/Site Body/ body { background-color:#fff; color:#999; }

/Green Header/ header { background:#6ab47b; border-color:#599a68; }

/This is going to be nav background on the mobile devices/ nav { background:#599a68; }

h1, h2 { color:#fff; }

a { color: #6ab47b; }

/This is the color for nav links/

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

/Selected nav color/ nav a.selected, nav a:hover { color: #32673f; }

Answer 6 · 2015-03-17T06:51:32Z

March 17, 2015 6:51am

Ryan

Thank you very much for your help. You answered my question completely.

Answer 7 · 2015-03-17T07:08:42Z

March 17, 2015 7:08am

Ryan

Thank you for your Reply. I am not sure if my question was clear or not but I want to know the name of the software or code editor you used, in the reply. The background, and syntax colors of the code editor you used is in different color and easier to read and more beautiful. I tried to adjust the code editor that comes with the forum but I can't find where to change it. I though it was sublime text software. Could you please let me know how you configure your code editor environment to these settings ? Thank you very much and I apologize for asking all these questions.

Best

Welcome to the Treehouse Community

Looking to learn something new?

hossein tootoonchy

hossein tootoonchy

I use the same code for removing the white space on top of the website, but no matter what the space still exists.

7 Answers

Ryan Field

Ryan Field

hossein tootoonchy

hossein tootoonchy

Ryan Field

Ryan Field

Ryan Field

Ryan Field

hossein tootoonchy

hossein tootoonchy

hossein tootoonchy

hossein tootoonchy

Ryan Field

Ryan Field

hossein tootoonchy

hossein tootoonchy

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

hossein tootoonchy

hossein tootoonchy

hossein tootoonchy

hossein tootoonchy

Ryan Field

Ryan Field