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

CSS

Posted by Sebastian Giliberto
Sebastian Giliberto
1,809 Points

Why isn't my header aligned with my section?

Okay so when I try to make the header aligned with the section it does not work - here is my code

a {
text-decoration: none;
}

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

}

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

}


a {

  color: #6ab47b;
}

header {

background: #6ab47b;
    border-color: #599a68

}

h1, h2 {
color: #fff;
}

HTML down below

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <title>Sebastian Giliberto | Gamer</title>
    <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/main.css">

  </head>
 <body>
    <header>
      <a href="index.html" id="logo">
         <h1>Sebastian Giliberto</h1>
          <h2>Gamer</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>
      <li>
        <a href=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif>
        <img src=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif alt="">
        <p>The LEO Symbol</p>
          </a>
     </li>
        <li>
        <a href=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif>
        <img src=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif alt="">
        <p>The LEO HQ</p>
          </a>
        </li>
      <li>
        <a href=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif>
        <img src=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif alt="">
        <p>Omg I love LEO </p>
          </a>
     </li>
      <li>
        <a href=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif>
        <img src="http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif" alt="">
        <p>LEO</p>
          </a>
     </li>
      <li>
        <a href=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif>
        <img src=http://bearriver.njuhsd.com/pictures/activities/leo%20club/7808761_orig.gif alt="">
        <p>Hello LEO</p>
          </a>
     </li>

      </ul>
    </section>
    <footer>
     <p>Twitter</p>
      <a href="http://twitter.com"> <img src="http://1.bp.blogspot.com/-Rwqcet_SHbk/T8_acMUmlmI/AAAAAAAAGgw/KD_fx__8Q4w/s1600/Twitter+bird.png" alt="Twitter Logo"></a>
      <p>Youtube</p>
       <a href="http://youtube.com"><img src="http://www.laptopspirit.fr/wp-content/uploads/new/youtube-logo.jpg" alt="Youtube Logo"></a>
      <p>&copy; 2015 Sebastian Giliberto</p>

      </footer>
     </div>
    </body>
</html>
Chyno Deluxe
Chyno Deluxe
16,936 Points

can you post your HTML please.

Sebastian Giliberto
Sebastian Giliberto
1,809 Points

There you go, sorry about that.

Chyno Deluxe
Chyno Deluxe
16,936 Points

When you say your header does not align what specifically are you looking to achieve? The header is center to me but i see that the images are not.

Sebastian Giliberto
Sebastian Giliberto
1,809 Points

I mean when I want to the Title I am going to say in this case - I want the title to be lined up with the pictures below, I am going to change the links to the pictures provided in the video at the time I couldnt download the pictures.

Sebastian Giliberto
Sebastian Giliberto
1,809 Points

Also How come My twitter and my facebook logos are on top of each other not beside?

1 Answer

Sebastian Giliberto
Sebastian Giliberto
1,809 Points

Never mind I found a solution, thanks for the help.