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

Watch Video

Posted March 5, 2016 2:37am by

Header Border

header {
  background: #6ab47c;
  border: 5px solid #599a68;
}

Why is there a white border around the colored header?

March 5, 2016 3:15am

Could you show us all of your coding? It could be that you have a second header selector somewhere that is over riding the one you have above.

March 5, 2016 3:17am

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

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

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

a {
  text-decoration: none;
}

ul {
  list-style: 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%;
}

#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: #6ab47c;
  border: 5px solid #599a68;
}

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

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

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

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

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

This is all of the coding.

March 5, 2016 3:50am

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Random Website</title>
    <link rel="stylesheet" href="css/normalize.ccs">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,600,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Random Website</h1>
      <h2>Attempt at Website</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Main</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>Random Picture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Random Picture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Random Picture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Random Picture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Random Picture</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/wiser2222"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/profile.php?id=100006960753585"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Not Actually Copyrighted</p>
      </footer>
    </div>
  </body>
</html>

This is the index.html file.

3 Answers

March 5, 2016 4:11am

I copied and pasted your coding onto my computer. Here is what's going on. Each web browser has a default style sheet which will be used unless you over write it. As soon as I added the margin: 0; property to the body selector it fixed the issue:

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

To deal with the browsers default style sheet you need to use a technique called CSS reset. You basically over write the default style sheet that comes with the browser. Do a google search on CSS reset for more info.

March 5, 2016 4:14am

Thank you for the information! You have helped a lot!

March 5, 2016 4:16am

You're welcome. :)

March 5, 2016 3:20am

Hi Debin, From your code, there should just be a green border. Look through the CSS and see if there's another header {} declaration somewhere with margin or padding - that may be the culprit (check main.css)

March 5, 2016 3:24am

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

This is the only place where the header has margin and padding. Should I just get rid of them?

March 5, 2016 3:46am

There is white space above the header

March 5, 2016 3:48am

Oh....I thought you meant the border was white. If you can show us your HTML coding I'm sure it can be figured out.

March 5, 2016 3:39am

Your header coding looks good and should be working. Here are the only two possible culprits I could find:

//padding top property is missing the dash in between the words padding and top, as shown below.
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding top: 50px;
  color: #ccc;
}

The only other thing it might be is your browser is working off of old cached data. Refresh your browser window and that sometimes fixes the issue.

March 5, 2016 3:44am

It still does not seem to work, but I can deal with it. Thanks for the help!

March 5, 2016 3:46am

So are you saying the border is white? Or that there is white space above the header?

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Ming Lei

Ming Lei

Header Border

Julie Myers

Julie Myers

Ming Lei

Ming Lei

Ming Lei

Ming Lei

3 Answers

Julie Myers

Julie Myers

Ming Lei

Ming Lei

Julie Myers

Julie Myers

Stephen Gheysens

Stephen Gheysens

Ming Lei

Ming Lei

Ming Lei

Ming Lei

Julie Myers

Julie Myers

Julie Myers

Julie Myers

Ming Lei

Ming Lei

Julie Myers

Julie Myers