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 CSS Layout Techniques Display Modes Block vs. Inline Elements

melissa brown
melissa brown
4,670 Points
Posted by melissa brown
melissa brown
4,670 Points

added padding but it didnt get rid of the gap

hi i added padding to the main header and main wrapper but it didnt get rid of the gap up the top? also i cant see the main header does anyone why this is?

<!doctype>
<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
<head>
    <title></title>
</head>
<body>
<div class="main-wrapper">
<header class="main-header">
      <nav class="main-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>
    <div>
    <h1>hello </h1>
    </div>
</div>
</body>
</html>

css

/* page styles */

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main-wrapper {
    width: 900px;
    height: 600px;
    margin: auto;
    background: #FF8C69;
    color: white;
}

.main-header, {
    padding: 30px;
    background-color: blue;

}

h1 {
    position: relative;
    text-align: left;
}

h2 {
    position: relative;
    text-align: left;
}
d

/* navigation */
.main-nav,
.main-nav li {
    display: inline-block;
    width: 100%;
}

.main-nav {
    background: yellow;
    vertical-align: midle;
    padding: 20px;
}


/* nav link*/ 
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link*/ 
nav a.selected, nav a:hover {
  color: #32673f;
}
mtch
mtch
8,521 Points

In your .main-nav there is a "d" missing in your vertical-align: middle;

What I can suggest you to do it to get rid of this position: relative - no idea why it is there.

And with your padding, you have be more specific, what your padding declaration is saying that it should apply x amount of padding to everything - top, right, bottom and left.

1 Answer

Jake Fleming
STAFF
Jake Fleming
Treehouse Guest Teacher
Jake Fleming
Jake Fleming
Treehouse Guest Teacher

You are missing a lot of markup and have a lot of syntax errors. Try to stick to best practices when writing your HTML and CSS. I took a stab at cleaning it up for you.

CSS:

/* page styles */
body {
  margin: 0;
}
* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}
.main-wrapper { 
  background: #FF8C69;
  color: white;
  height: 600px; 
  margin: 0 auto; 
  padding: 30px;
  width: 900px; 
}
.main-header {
  padding: 30px; background-color: blue;
}
h1 { 
  position: relative; 
  text-align: 
  left; 
}
h2 { 
  position: relative;
  text-align: left;
}

/* navigation */ 
.main-nav, .main-nav li { 
  display: inline-block; 
  width: 100%; 
}
.main-nav { 
  background: yellow; 
  vertical-align: middle; 
  padding: 20px; 
}

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

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>My Great Page</title>
</head>
<body>
  <nav class="main-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>
  <div class="main-wrapper">
    <h1>hello </h1>
  </div>
</body>
</html>