CSS issues with a top border/header margin on just one page

Question

My webpage newtonashfish.co is up and running but on the 'Contact' page at mobile size (480px and smaller) a top-border seems to appear, but only for that page. I've used Chrome Developer Tools to try and identify why my <header> section seems to start 20px lower on this page than the others but can't seem to find the issue. Any help much appreciated!

Here's my 'Contact' page html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Newton-Ash Fish | Co.</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <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>Newton-Ash Fish Co.</h1>
      <h2>Tresco, Isles of Scilly</h2>
      <h3><img id="logo-pic" src="../img/Logo.jpg" alt="Logo"></h3>
     </a>
     <nav>
       <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About Us</a></li>
         <li><a href="contact.html" class="selected">Contact</a></li>
       </ul>
     </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <p>The best way to contact us is by phone as we're either at work or out on the water! If you can't get through (Scilly's not known for its cellular reception..) please don't hesitate to leave a message and we'll get back to you as soon as possible.</p>
        <p>If you've enjoyed your order please tell us - we'd love to hear from you! We use <a href="https://twitter.com/hashtag/newtonashfish?src=hash">#newtonashfish</a> for <a href="https://www.twiiter.com/newtonashfish">twitter</a> and for all our yummy <a href="https://instagram.com/newtonashfish">instagram</a> posts, but feel free to share photos on our <a href="https://www.facebook.com/pages/Newton-Ash-Fish/457539744391316?fref=ts">facebook</a> page too!</p>
        <p></p>
      </section>
      <section id="secondary">
      <h3>Contact Details</h3>
      <ul class="contact-info">
        <li class="phone"><a href="tel:07841429291"> 07841 429291</a></li> 
        <li class="mail"><a href="mailto:newtonashfish@gmail.com">newtonashfish@gmail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=newtonashfish">@newtonashfish</a></li>
      </ul>
      </section>
      <footer>
        <a href="http://twitter.com/newtonashfish"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/pages/Newton-Ash-Fish/457539744391316?fref=ts"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://instagram.com/newtonashfish"><img src="img/instagram-wrap.png" alt="Instagram Logo" class="social-icon"></a>
        <p>&copy; 2015 Newton-Ash Fish Co.</p>
      </footer>
    </div>
  </body>
</html>

And here's my main CSS file:

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  letter-spacing: 1.5;
}

#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 20px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

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

#logo-pic {
  max-width: 100px;
  padding: 5px 0 0 0;
  border-radius:  100%;
}

h1 {
  font-family: 'Raleway', 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;
  font-family: 'Raleway', sans-serif;
  padding: 5px 0;
  margin: 5px 0 0;
  border-bottom: 3px solid brown;
}

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: #aaa;
}

.social-icon {
  width: 25px;
  height: 25px;
  margin: 0 5px;
}


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

#video {
  width: 90%;
  margin: 5%;
}

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
}

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

.profile-photo {
  display: block;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 30%;
  padding: 3%;
}

.about-photo {
  display: none;
  float: right;
  max-width: 200px;
  border-radius: 30%;
  padding: 0 5%;
}


/************************************
PAGE: CONTACT
************************************/

.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: linear-gradient(brown 0px, chocolate 250px, khaki 500px, cornsilk 800px);
  color: black;
  margin: -20px 0;
}

/*header banner*/
header {
  background-image: url(../img/10377164_10202811885713079_8417318786174613773_n.jpg);
  background-repeat: no-repeat;
  background-position: center;
  border-color: #6c4f3a;
}

/* nav background on mobile*/
nav {
  background-color: chocolate;
}

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

/* links */
a {
  color: #8c6f5b;
}

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

/* selected nav link*/
nav a.selected, nav a:hover {
  color: #fff;
}

Answer 1 · 2015-07-08T15:32:33Z

July 8, 2015 3:32pm

Hi Natasha, take a look at .about-photo which is set to display:block - does it need to be? Edit: Or maybe that wasn't it - seems fixed now.

Welcome to the Treehouse Community

Looking to learn something new?

Natasha Lawson

Natasha Lawson

CSS issues with a top border/header margin on just one page

Natasha Lawson

Natasha Lawson

1 Answer

Mark Wilkowske

Mark Wilkowske

Natasha Lawson

Natasha Lawson