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 trialMarius Furnica
9,195 PointsProblem at the nav
Hi guys i have a problem at the top of my header https://ibb.co/Dzpm7tP I don't understand why...
body{
font-family: 'Open Sans',sans-serif;
}
#wrapper {
max-width: 948px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img{
max-width: 100%;
}
h3{
margin:0 0 1em 0;
}
/******************************
HEADING
******************************/
header{
margin:0 0 30px 0;
padding: 5px 0 0 0;
width:100%;
float:left;
}
#logo {
text-align: center;
margin:0;
}
h2{
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h1 {
font-family: 'Changa One', sans-serif;
margin:15px 0px;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
/******************************
NAVIGATION
******************************/
nav {
text-align: center;
padding: 10px;
margin:20px 0 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: 0.75em;
text-align: center;
padding-top: 50px;
color:#ccc;
clear: both;
}
.social-icon{
width:20px;
height:20px;
margin:0 5px;
}
/******************************
Page Portofolio
******************************/
#gallery {
margin:0;
padding: 0;
}
#gallery li{
float: left;
width:45%;
margin:2.5%;
background-color: #f5f5f5;
color:#bdc37c;
list-style: none;
}
#gallery li a p {
margin:0;
padding: 5%;
font-size: 0.80em;
color:#bdc37c;
}
/******************************
PAGE ABOUT
******************************/
.profile-photo {
display: block;
max-width: 175px;
margin: 0 auto 30px;
border-radius: 100%;
}
/******************************
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.e-mail a {
background-image: url('../img/mail.png');
}
.contact-info li.instagram a {
background-image: url('../img/twitter.png');
}
/******************************
COLORS
******************************/
/* site body*/
body{
background-color: white;
color: #999;
}
/* green header*/
header {
background:#6ab47b;
border-color: #599a68
}
/* logo text*/
h1,h2{
color:#fff;
}
/* links*/
a {
color:#6ab47b;
}
/* nav background on mobile devices*/
nav {
background: #599a68;
}
/* nav link*/
nav a, nav a:visited{
color: #fff;
}
/* selected nav link*/
nav a.selected, nav a:hover{
color: #32673f;
}
@media screen and (min-width:480px) {
/******************************
TWO COLUMN LAYOUT
******************************/
#primary{
width:50%;
float: left;
}
#secondary{
width: 40%;
float: right;
}
}
/******************************
PORTOFOLIO
******************************/
#gallery li {
width:28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
/******************************
PAGE ABOUT
******************************/
.profile-photo{
float: left;
margin: 0 5% 80px 0;
}
@media screen and (min-width:660px) {
/******************************
HEADER
******************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align:right;
}
#logo{
float:left;
margin-left:5%;
text-align: left;
width:45%;
}
h1{
font-size: 2.5em;
}
h2{
font-size: 0.825em;
margin-bottom: 20px;
}
header{
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flavius</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
<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>Furnica Flavius</h1>
<h2>Front-End Developer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portofolio</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 id="gallery">
<ul>
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimantation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to creat an 80's style of glose</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creatings shapes using repetitions</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.instagram.com/rotraveller_/"><img src="img/twitter-wrap.png" alt="Twiter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/FrnFlavius"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2019 Furnica Flavius.</p>
</footer>
</div>
</body>
</html>
So this is the code i have already normalize.css
4 Answers
Antony .
2,824 PointsIf you don't mind could you provide your html code too?
Jamie Reardon
Treehouse Project ReviewerThat gap is caused by the default margining of the body and h1 elements. It's what is called "margin collapse" which means that when there are two vertical margins that touch each other (nothing to separate them like borders), which ever one has the largest of the size they both take on that size and collapse to one margin. If you inspect the elements with the chrome dev tools you should see that.
You can use a css reset file called normalize.css that removes the default margining from the body to prevent this.
You can simply add a padding top property to your header element to remove it or remove the top margin from the h1.
Marius Furnica
9,195 Pointsi have the normalize.css already
Jamie Reardon
Treehouse Project ReviewerRemove the top margin on your h1 element.
Marius Furnica
9,195 PointsYeap i did ...still didn't solve the problem
Marius Furnica
9,195 PointsI remove the 15px margin......
Jamie Reardon
Treehouse Project ReviewerWhich version of css normalize are you using?
Marius Furnica
9,195 Pointsi had to put float:left to #wrapper ...case close!
Marius Furnica
9,195 PointsMarius Furnica
9,195 Pointsokey!
Antony .
2,824 PointsAntony .
2,824 PointsThis works on my screen, though because I do have a 1366x768 screen could make things look different on your end. Let me know if this doesn't fix it.