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 trialTaj Patel
1,207 PointsSize 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 ♥ in Orange County.</p>
<p>© 2016 Taj Patel.</p>
</footer>
</div>
</body>
</html>
2 Answers
Aurelian Spodarec
10,801 PointsIs 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
10,008 PointsYou 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 :)
}
Julian Gutierrez
19,201 PointsJulian Gutierrez
19,201 Points*Edited markdown - JG