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 Add a New Page

Posted by Feras Saffar
.a{fill-rule:evenodd;}techdegree
Feras Saffar
UX Design Techdegree Student 1,390 Points

How to remove the white bar over the header? I have only in the index.html file but the other two files are ok.

Here is my coding I'm going it here: <!DCOTYPE html> <html> <head> <meta charset="utf-8"> <title> Welcome to my world </title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Exo:400,400i,700,700i,800" rel="stylesheet"> <link rel="stylesheet" href="css/Main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1> Feras Alsaffar </h1> <h2> Desiger </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="Hello">
<section id="gallery"> 
  <ul> 
    <li> <a href="IMg/numbers-01.jpg"></a>
      <img src="IMg/numbers-01.jpg" alt="">
      <p> I alwasy win lottery with with this number, number one.  </p>
    </li>
    <li> <a href="IMg/numbers-02.jpg"></a>
      <img src="IMg/numbers-02.jpg" alt="">
      <p> It's an even number! and it love when it get multiplied by its number.</p>
    </li>
    <li> <a  href="Img/numbers-06.jpg"></a>
      <img src="IMg/numbers-06.jpg" alt="">
      <p> I know I was born on 16th of march and 6 is sort of close to it. </p>
    </li>
    <li> <a href="IMg/numbers-09.jpg"></a>
      <img src="IMg/numbers-09.jpg" alt="">
      <p> I don't what to comment on this number! </p>
    </li>
    <li> <a href="Img/numbers-12.jpg"> </a>
      <img src="IMg/numbers-12.jpg" alt="">
      <p> This number because  reminds of the month December.</p>
    </li>
  </ul>
  </section>
  <footer>   
  <a href="https://facebook.com/ferasalsaffar"> <img src="IMg/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a>
    <p>&copy; coming on 2017 Feras Alsaffar. </p>
  </footer>
  </div>
</body>

</html>

Arturo Perez
.a{fill-rule:evenodd;}techdegree
Arturo Perez
Front End Web Development Techdegree Student 12,902 Points

i would recommend to use the console and inspect your elements. i believe it will make it easier for you to see what element is causing that white bar to appear. if your not sure how to do that, just ask google. every browser has a different ui ux design to there console so make sure your specific to what browser your using. example [How do i inspect my elements on google chrome]

1 Answer

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Target your header in css with: margin-top: -20px;

So it would be something like this .header { margin-top: -20px;
} (maybe more, or less px in your case)

I don't know if it's best practice, but this is how I solved it.