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 trialPaula Mourad
5,154 PointsH3 Stuck to Navigation
Hi!
I'm working in my "contact" page, and my h3 tag inside section, is stuck to the navigation. I wish I could upload a screenshot, but I cant. The text "General Information" is stuck to the header's green part.
Thanks!
9 Answers
nico dev
20,364 PointsHi Paula Mourad ,
Hope this is not just too late and it may help you somehow :) but I was searching through your code and trying it while modifying one and other thing, and this is what I've found: I believe your problem mainly comes from the margin you set (in the CSS) to the header.
Now, I learned with a great comment of a user here that the order of the values in margin, padding (and all those alike) is like the clock, so: Top, Right, Bottom, Left.
Following that criteria, the margin suggested was:
header {
margin: 0 0 30px 0;
}
Now, if you do this you should only have a margin in the bottom (i.e.: outside the header, toward the bottom). However, that part of your code looks like this:
header {
margin: 0 30px 0 0;
}
As you can imagine that brings the h3's upper section together with the header (which, of course, includes our <nav>), since you don't have anymore your margin at the bottom.
If you try swapping the '30px' with the next zero to its right, save and refresh the browser, you'll notice the difference I'm mentioning.
HTH!
NOTE: I also found this code that I suspect was an attempt of yours to fight against the issue you mention, but that I believe is not necessary or helpful, and I believe (hope I'm right?) you can remove:
section h3 {
clear: both;
}
Bryce Santos
11,157 PointsIs the section somehow in your nav? did you make sure you end your nav element in the right place?
Paula Mourad
5,154 PointsHi Bryce, Yes, both my NAV and SECTION tags are correctly open and closed. Here is my code:
<header>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3>General Information</h3>
<p>I am currently looking for a new job on the design are. If you wish to contact me, don't hesitate to send me an e-mail or phone me. Looking forward to meeting you!</p>
<p>Please only use phone contact to reach me. Otherwise, please send me an e-mail or drop me a line at my twitter account.</p>
</section>
```
Bryce Santos
11,157 PointsIs the div id "wrapper" closed in your code or did you just happen to copy and paste the code before the div was ended?
Paula Mourad
5,154 PointsHey Bryce,
It is closed too. Look:
<div id="wrapper">
<section>
<h3>General Information</h3>
<p>I am currently looking for a new job on the design are. If you wish to contact me, don't hesitate to send me an e-mail or phone me. Looking forward to meeting you!</p>
<p>Please only use phone contact to reach me. Otherwise, please send me an e-mail or drop me a line at my twitter account.</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:9237-9172">9237-9172</a></li>
<li class="mail"><a href="mailto:paulamouradp@gmail.com">paulamouradp@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=pmourad84">@pmourad84</a></li>
</ul>
</section>
<footer>
<a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Paula Mourad.</p>
</footer>
</div>
```
Bryce Santos
11,157 PointsCan I see your CSS?
Paula Mourad
5,154 PointsSure, here it is:
/**************************************
GENERAL
**************************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
padding-top: 10px;
}
/**************************************
HEADING
**************************************/
header {
float: left;
margin: 0 30px 0 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 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: 800;
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 {
padding: 0;
margin: 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;
}
/**************************************
PAGE: ABOUT
**************************************/
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
padding: 5%;
border-radius:100%;
}
/**************************************
PAGE: CONTACT
**************************************/
section h3 {
clear: both;
}
.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.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/**************************************
COLORS
**************************************/
/* Site Body */
body {
background-color: #fff;
color: #999;
}
/* Green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */
nav {
background: #599a68;
}
/* Logo text */
h1, h2 {
color: #fff;
}
/* Links */
a {
color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
```
Bryce Santos
11,157 PointsSo I went ahead and put it into my own editor, and seems like everything's being display properly.
Paula Mourad
5,154 PointsThat's weird. Thanks anyways! :))