My H2 is not aligned with my H1 for desktops.

Question

While my H1 and H2 are both moved to the left when the screen is expanded, my H2 is sitting farther to the left than my H1, and is not flush like in the video. Any ideas?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Vasileff | Writer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700|Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
    <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>Nick Vasileff</h1>
        <h2>Writer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">About</a></li>
          <li><a href="projects.html" >Projects</a></li>
          <li><a href="portfolio.html" >Portfolio</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>Fancy Numbers again</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Fancy Numbers and again</p>
            </a>
          </li>

          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Fancy Numbers and againg I guess</p>
            </a>

          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Fancy Numbers practice</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Fancy Numbers</p>
            </a>
          </li>
        </ul> 
      </section>
      <footer>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Vasileff.</p>
      </footer>
    </div>
  </body>  
</html>

Responsive.css

@media screen and (min-width: 480px) {
  /*************************
 Two Column Layout
*************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }


 /*************************
 Page: about image landing
*************************/

  #gallery li {
  width: 28.333333%;
}

  #gallery li:nth-child(4n) {
    clear:left;
  }

 /*************************
 Page: projects
*************************/
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }


 @media screen and (min-width: 660px) {
/*************************
 header
*************************/

   nav { 
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right:5%;
      text-align: right;
      width: 45%;
    }

    #logo {
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;
    }

    h1 {
      font-size: 2.5em;
    }
    h2 {
      font-size: 0.825em;
      margin-bottom: 20px;
    }

    header {
      border-bottom: 5px solid #599a68;
      margin-bottom: 60px;
    }
 }

main.css

/*************************
GENERAL
*************************/
body {
  font-family: 'Open Sans Condensed', sans-serif;
}

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

a {
  text-decoration: 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: 'Roboto Condensed', sans-serif;
  margin: 15px;
  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 000 
}

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

nav li {
 display: inline-block;
}

nav a {
  font-weight: 700;
  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:About (Landing Page with images)
*************************/
#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:Projects
*************************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin:0 auto 30px;
  border-radius: 100%;
}



/*************************
Page: Portfolio 
*************************/
.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 0;
}
.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.facebook a {
  background-image: url('../img/facebook.png')
}


/*************************
Colors
*************************/
/* Site Body */
body {
  background-color: #fff;
  color: #999; 
}

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

/* Nav Background Mobile */
nav {
   background: #599a68;
}

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

/* Links */
a {
  color: #6ab47b
}

/* Nav Link */
nav a, nav a:visited {
  color: #fff;
}

/* Slected Nav Link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 1 · 2016-10-27T15:48:24Z

October 27, 2016 3:48pm

Hey Nick!

so your h1 has a margin of 15px, which also means a margin of 15px on the left side ;)

h1 {
  font-family: 'Roboto Condensed', sans-serif;
  margin: 15px;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

Remove that and let me know if it worked ;)

Answer 2 · 2016-10-27T16:09:51Z

October 27, 2016 4:09pm

David Schriever, shoot that was a simple fix. Thanks!

Welcome to the Treehouse Community

Looking to learn something new?

Nick Vasileff

Nick Vasileff

My H2 is not aligned with my H1 for desktops.

David Schriever

David Schriever

Nick Vasileff

Nick Vasileff

2 Answers

David Schriever

David Schriever

Nick Vasileff

Nick Vasileff

David Schriever

David Schriever