In desktop view, there are no line breaks in-between my head, and header. Also my text is wrapping weirdly.

Question

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

  /**************
  TWO COLUMN LAYOUT
  ***************/

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

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


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

  #gallery li {
    width: 28.3333%;
  }

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

  /**************
  PAGE: COMPANY
  ***************/

  .logo-image {
    float: left;
    margin: 0 5% 80px 0;
  }

}






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

  /**************
  PAGE: 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 #fff;
    margin-bottom: 60px;    
  }

}

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

body {
  font-family: 'Nixie One', 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: center;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width 100%;
}

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

h1 {
  font-family: 'Nixie 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 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  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: HOME
***************/

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

#gallery li {
  float: left;
  width: 45%;
  margin 2.5%;
  background-color: #000;
  color: #fff;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #fff;
}

/**************
PAGE: COMPANY
***************/

.logo-image {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 0%;
}

/**************
PAGE: BUY
***************/

.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;
}

.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');
}

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

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

/* white header */
header {
  background: #000;
  border-color: #000;
}

/* nav background on mobile */
nav {
  background: #000;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #fff;
}

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

/* selected nav links */
nav a.selected, nav a:hover {
  color: #54ff9f;
}

Welcome to the Treehouse Community

Looking to learn something new?

Alexandre Cort

Alexandre Cort

In desktop view, there are no line breaks in-between my head, and header. Also my text is wrapping weirdly.

Kelly von Borstel

Kelly von Borstel

Alexandre Cort

Alexandre Cort

Alexandre Cort

Alexandre Cort

Kelly von Borstel

Kelly von Borstel