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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Taj Patel
Taj Patel
1,207 Points
Posted by Taj Patel
Taj Patel
1,207 Points

Size of navigation bar is not correct.

For some reason the nav section on my website is really thin. The height of it is only the height of the text. I am not sure where I went wrong with the code.

Here is my CSS:

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

body {
  font-family: 'Roboto', sans-serif;
}

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

a {
  text-decoration: none;
}

img {
  max-width: 100%
}



/******************
HEADING
******************/

header{
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%
}

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

h1 {
  font-family: 'Roboto', sans-serif;
  margin: 15px 0;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 0.90em;
  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: 900;
  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 PORTFOLIO
******************/

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

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

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

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

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

/* dark gray blue header */
header {
  background: #171C1E;
  border-color: #599a68
}

/* nav background on mobile */
nav {
  background: #3f4d54
}

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

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

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

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

And here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Taj Patel | Entreprenuer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Taj Patel</h1>
        <h2>Entreprenuer</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>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="http://vipeapp.co">
              <img src="img/Vipe.jpg" alt="">
              <p>Founder | CIO</p>
            </a>
          </li>
          <li>
            <a href="http://fluxergy.com">
              <img src="img/FluxErgy.jpg" alt="">
              <p>Director of Marketing</p>
            </a>
          </li>
          <li>
            <a href="http://kichnow.com">
              <img src="img/KICH.jpg" alt="">
              <p>Founder | CEO</p>
            </a>
          </li>
          <li>
            <a href="http://trytoucan.com">
              <img src="img/Toucan.jpg" alt="">
              <p>Co Founder</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://www.linkedin.com/in/taj-patel-3b995810a">
          <img src="img/twitter-wrap.png" alt="LinkedIn Logo" class="social-icon">
        </a>
        <a href="https://www.facebook.com/thetdp">
          <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
        </a>
        <p>Made with &hearts; in Orange County.</p>
        <p>&copy; 2016 Taj Patel.</p>
      </footer>
    </div>
  </body>
</html>

2 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Is the zoom 100% on your browser?

Also, check the markdown Cheatsheet on how to post the code please. You can find it above the 'Post Answer' button. It will be in bold saying 'Markdown Cheatsheet'.

Jorge Luis Ochoa Araoz
Jorge Luis Ochoa Araoz
10,008 Points
Jorge Luis Ochoa Araoz
Jorge Luis Ochoa Araoz
10,008 Points

You could fix that with this : 

 nav{
      text-align:center;
      padding:10px 0;
      margin:20px 0 0; // Remember the second Zero is for right and bottom :)
 }