Header is small rectangle on the left side and first gallery image is next to it at top instead of being below?

Question

I'm not sure how to make the header go all the way across at the top, when I preview it it shows a small rectangle on the left side and the first gallery image is on the right and I'm not sure how to fix it.

      <p>This is code!</p>```
/******************************
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%;
}



/******************************
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 o;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}



/******************************
FOOTER
*******************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



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


/******************************
COLORS
*******************************/

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

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

/* nav background on mobile */
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;
}







 ```html
      <p>This is code!</p>
      ```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Paettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a  href="index.html" id="logo">
      <h1>Nick Pettit</h1>
      <h2>Designer</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 blending modes in Photoshop.</p>
            </a>
         </li>
          <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Trying to creatw an 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 repetition.</p>
            </a>
         </li>  
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2016 Hannah Blair.</p>
      </footer>
     </div>
  </body>
</html>

Answer 1 · 2016-04-04T16:41:45Z

April 4, 2016 4:41pm

Hello Hannah,

Just copy and paste your code when you ask a question. There is a markdown sheet to use that gives you details on how to mark up your post. Here are the instructions for code...

Code

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

      ```html
      <p>This is code!</p>
      ```

I hope this helps in some way!

Answer 2 · 2016-04-04T15:03:28Z

April 4, 2016 3:03pm

Have you tried this?

#YourHeaderID {
   display: block;
}

Answer 3 · 2016-04-04T17:38:26Z

April 4, 2016 5:38pm

It was a missed semi colon! I never learn...

Answer 4 · 2016-04-04T18:05:58Z

April 4, 2016 6:05pm

I used to struggle with the same thing! That would be my first advice to a young developer. If you run into a problem check syntax first!

HAPPY CODING!!!

Welcome to the Treehouse Community

Looking to learn something new?

Hannah Blair

Hannah Blair

Header is small rectangle on the left side and first gallery image is next to it at top instead of being below?

Hannah Blair

Hannah Blair

4 Answers

Timothy Blubaugh

Timothy Blubaugh

Hannah Blair

Hannah Blair

Claudiu Bancos

Claudiu Bancos

Hannah Blair

Hannah Blair

Hannah Blair

Hannah Blair

Timothy Blubaugh

Timothy Blubaugh