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 Adding Pages to a Website Add Iconography

Paula Mourad
Paula Mourad
5,154 Points

H3 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
nico dev
20,364 Points

Hi 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
Bryce Santos
11,157 Points

Is the section somehow in your nav? did you make sure you end your nav element in the right place?

Paula Mourad
Paula Mourad
5,154 Points

Hi 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
Bryce Santos
11,157 Points

Is 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
Paula Mourad
5,154 Points

Hey 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>&copy; 2016 Paula Mourad.</p>
      </footer>
    </div>

          ```
Bryce Santos
Bryce Santos
11,157 Points

Can I see your CSS?

Paula Mourad
Paula Mourad
5,154 Points

Sure, 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
Bryce Santos
11,157 Points

So I went ahead and put it into my own editor, and seems like everything's being display properly.

Paula Mourad
Paula Mourad
5,154 Points

That's weird. Thanks anyways! :))