Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Steven Espin
Steven Espin
3,012 Points

spacing issues at the top of website

I'm making a practice website for fun and practice, but i'm having issues with spacing at the top of the page. using the chrome devtools I found that it might have to do something with the float: left property since if i take it off, the space at the top goes away, however there are other issues that come along with it (the nav is spaced weird). any help or suggestions will be appreciated

found out that the spacing issue occurs when i add something to the section such as a paragraph... still not sure how to fix.

here is the css

/*-------------------------------
  GENERAL
--------------------------------*/
a {
  text-decoration: none;
}




/*-------------------------------
  HEADER
--------------------------------*/

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;
  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 li {
 display: inline-block;
}

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

/*-------------------------------
  FOOTER
--------------------------------*/

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

/*-------------------------------
  COLORS
--------------------------------*/

header {
  background: #a4a593;
}

a {
  color: #2a2c2c;
}

nav {
  background: #638289;
}

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

body {
  background: #eee;
  margin: 0;
}

and here is the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Espin farms|luxery farm retreat</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One%7cOpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Espin Farms</h1>
      <h2>Luxery Farm Retreats</h2></a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="cast.html">Cast</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <p>Espin Farms is a luxury farm resort commited to our goal of providing quality products and animals for sale and rent. Our animals are of the highest quality picked ripe off the imbelical cord and staright into our farm. Whether you're looking for farm-fresh eggs produced daily by our cage-free chickens or creamy like silk goat milk, you'll find it here. </p>
      <p>come visit us and see the glory for yourselve. We look foward to seeing you.</p>
    </section>
    <footer>
      <p>&copy; 2015 Espin Farms</p>
    </footer>
  </body>
</html>

1 Answer

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

You have the header floating to the left. Did you want the logo to float to the left? I would remove the float from the header and float the logo == #logo == to the left

Richard Nicholls
Richard Nicholls
1,301 Points

Or just remove the header declaration and leave the logo in the middle

Steven Espin
Steven Espin
3,012 Points

i'm not trying to float the logo to the left. I was trying to copy the portfolio project and they use the float property on the header there without a problem. also my other pages which are basically the same thing except no text (empty pages for now) have no spacing issues at the top.

thanks the quick reply

Steven Espin
Steven Espin
3,012 Points

just found out it has something to do with the section element because the spacing issue only happens when I add a paragraph or something. any ideas?