The Index.html page has some blank horizontal space above the header. How should I remove it?

Question

The code details for header is -

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

Answer 1 · 2016-12-01T10:12:42Z

December 1, 2016 10:12am

This may be a case of "margin collapse".

Your browser may give paragraphs ("<p>") a vertical margin by default, and due to "margin collapse" it may be extending over the header. Try explicitly setting the paragraph margin to 0:

p { margin: 0; }

As an alternative, you could apply a "clearfix" between the header and the #wrapper.

Answer 2 · 2016-12-02T10:11:22Z

December 2, 2016 10:11am

/**********
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%;
}

h3 {
  margin: 0 0 1em 0;
}


/**********
Heading
***********/


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

p {
  margin: 0;
}


#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;
}



/**********
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;
}




/**********
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;
}


/**********
Page 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;
}



/**********
Page : About
***********/
.profile-photo {
  display: block;
  max-width: 150px;
  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.mail a {
  background-image: url('../img/mail.png');
}


.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}




/**********
Colors
***********/



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

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

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

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

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

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}```

Answer 3 · 2016-12-02T10:14:06Z

December 2, 2016 10:14am

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Renu Kumari | Technical Writer</title>    
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">    
  </head>
  <body>
    <header>      
      <a href="index.html" id="logo">
      <h1>Renu Kumari</h1>
      <h2>Technical Writer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</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>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with bending modes in Photoshop</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create and 80's style of glows</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>Creating shapes using repetitions</p>
            </a>
          </li>      
        </ul>
        <p>Gallery will go here.</p>
      </section>
      <footer>
        <a href="https://www.facebook.com/profile.php?id=100006844172299"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <a href="https://twitter.com/nueram"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <p>&copy; 2016 Renu Kumari.</p>
      </footer>
    </div>  
  </body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

rk15

rk15

The Index.html page has some blank horizontal space above the header. How should I remove it?

rk15

rk15

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

rk15

rk15

Steven Parker

Steven Parker

To format your code, use three accents (```), not three apostrophes (''').

3 Answers

Steven Parker

Steven Parker

This may be a case of "margin collapse".

rk15

rk15

rk15

rk15

rk15

rk15