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 Responsive Web Design and Testing Build a Three Column Layout

Tomasz Cysewski
Tomasz Cysewski
2,736 Points
Posted by Tomasz Cysewski
Tomasz Cysewski
2,736 Points

header doesnt work

Hello, why border-bottom doesnt work in header?Thx

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <style>

      #id li{
        float: left;
        width:45%;
        margin: 2.5%;
      }
      img{
        max-width:100%;
      }
      #wrapper {
        float: left;

        margin: 0 auto;
        padding: 0 5%; }

      nav ul{
        list-style: none;
        display: inline-block;
      }
      nav li{
        display: inline-block;
      }
      @media screen and (min-width: 480px){

        nav{
          float: right;
          width: 45%;
          text-align: right;
          margin-right: 5%;
          font-size: 1.125em;
        }
        #logo{
          float: left;
          text-align: left;
          margin-left: 5%;
          width: 45%;
        }
      }
      header{
        border-bottom: 5px solid green;
        margin-bottom: 60px;
      }
    </style>
  </head>
  <body>
    <header>
            <a id="logo" href="index.html" >
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav style="text-align: center; padding: 10px; margin: 20px 0 0;">
        <ul>
          <li><a href="index.html">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="id" class=" gallery">
          <li><img src="numbers-01.jpg" alt="numbers-01"></li>

          <li><img src="numbers-02.jpg" alt="numbers-01"></li>

          <li><img src="numbers-06.jpg" alt="numbers-01"></li>
          <li><img src="numbers-09.jpg" alt="numbers-01"></li>
          <li><img src="numbers-12.jpg" alt="numbers-01"></li>
        </ul>
      </section>
    </div>

    <footer style="font-size: 0.75em; text-align: center; padding: 50px; color: #ccc; clear: both">
      <p>&copy; 2014 Nick Pettit.</p>
    </footer>
  </body>
</html>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You don't see the border at all?

Can you post a snapshot of your workspace?

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

If your bottom border is appearing at the top then it likely means your header has collapsed to zero height and it's not containing the logo and nav elements. This happens because the logo and nav are floated.

It looks like you've deviated quite a bit from how this project is taught in the course so you're going to have some differences and problems that the teacher doesn't have.

The header element was supposed to be floated left in this project in order to prevent the collapsing that you seem to be experiencing. I don't see that in your css. Also, you floated the wrapper div but the instructor never did that.

Try adding float: left; to your existing header styles and see if that fixes your problem.

You may want to consider starting over or launching the current workspace and starting from there.