I decided to use the display properties instead of the floats that he used and for some reason it affects my margins...

This is my responsive.css for the How to build a website

@media screen and (min-width:480px) {

/******************************************************* TWO COLUMN LAYOUT ******************************************************/ / main {background:lightgrey;}/ #primary {width:50%; display: inline-table;margin: 0 2.2%}/*display:inline-block positions it relative to the bottom and not the top/ #secondary {width: 40%; display: inline-table; margin: 0 2.2%} /* footer {clear: both;} he used float left and right for the primary and secondary id's to */

/******************************************************* TWO COLUMN LAYOUT:ABOUT *******************************************************/

.profile-pic { float: left; margin: 10px 5% 100px 0; }

/******************************************************* 3 * 4.4 = 13.2 100 - 12.2 = 87.8 87.8 / 3 = 29.266666667 *******************************************************/

/******************************************************* THREE COLUMN LAYOUT *******************************************************/

gallery li {width: 28.266666667%;}

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

nav { display:inline-table; background: none; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; margin: 0 7%;/to keep the nave close to the edge of the screen/ }

#logo { display: inline-table; margin-left: 5%; text-align: left; width: 35%; margin-bottom: 20px; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em;

}

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

And this is my main.css code

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

body {

}

wrapper

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

a { text-decoration:none; color: #6ab47b;

}

img {max-width: 100%}

h3 { margin: 0 0 1em 0;

} /******************************************************* HEADINGS *******************************************************/

header { margin: 0 0 3z0px 0; padding: 5px 0 0 0; /* float: left; width:100% he used for in the future. */ }

logo

{ text-align: center; margin: 0; }

h1 { margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: .8em; }

h2 { font-size: .75em; margin: -5px 0 0;/negative is used to pull the header closer to another element/ font-weight: normal; }

/******************************************************* NAVIGATION *******************************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 ; }

nav ul { list-style: none; margin: 0 10px; padding: 0; } nav ul li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/******************************************************* PAGE: PORTFOLIO *******************************************************/

gallery

{ margin: 0; padding: 0; list-style: none; }

gallery li

{ /* float: left; he floated the items instead of using display which i don't like./ display: inline-table; width: 45%; margin: 2.2%;/*he put 2.5%/ background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p

{ margin: 0; padding: 5%; font-size: .75em; color: #bdc3c7; }

/******************************************************* PAGE: ABOUT *******************************************************/

.profile-pic { 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: .9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 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');

} /******************************************************* FOOTER *******************************************************/

footer { font-size: .75em; text-align: center; padding-top: 50px; color: #ccc; /clear:both; he uses this to clear the floats he put on the gallery/ }

.social { width: 20px; height: 20px; margin: 0 5px; }

/******************************************************* COLOUR *******************************************************/

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

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

h1,h2{color: white;}

/mobile nav background/ nav {background: #599a68;}

nav a, nav a:visited {color: #fff;}

nav a.selected, nav a:hover {color: #32673f;}

and this is the html

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Pierre Smith | Software Engineer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/reponsive.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head> <body>

<header>
  <a href="index.html" id="logo">
    <h1>Pierre Smith</h1>
    <h2>Software Engineer</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>

<main id="wrapper">
  <ul id="gallery"><!--124x168-->
    <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>bla bla bla 1</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-02.jpg.">
        <img src="img/numbers-02.jpg" alt="">
        <p>bla bla bla 2</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>bla bla bla 6</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>bla bla bla 12</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>bla bla bla 1</p>
      </a>
    </li>
    <li>
      <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>bla bla bla 12</p>
      </a>
    </li>
  </ul>
</main>

<footer>
  <a href="http://facebook.com/pierresmith"><img src="img/facebook-wrap.png" alt="facebook Logo" class="social"></a>
  <a href="http://twitter.com/pierrens"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social"></a>
  <p>&copy; 2014 Pierre Smith.</p>
</footer>

</body> </html>