H3 Stuck to Navigation

Question

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!

Answer 1 · 2016-09-21T09:35:22Z

September 21, 2016 9:35am

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;
}

Answer 2 · 2016-09-11T04:46:48Z

September 11, 2016 4:46am

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

Answer 3 · 2016-09-11T15:00:30Z

September 11, 2016 3:00pm

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>
          ```

Answer 4 · 2016-09-11T15:16:19Z

September 11, 2016 3:16pm

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?

Answer 5 · 2016-09-11T15:18:40Z

September 11, 2016 3:18pm

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>

          ```

Answer 6 · 2016-09-12T01:14:35Z

September 12, 2016 1:14am

Can I see your CSS?

Answer 7 · 2016-09-12T18:40:03Z

September 12, 2016 6:40pm

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;
}
     ```

Answer 8 · 2016-09-13T05:28:01Z

September 13, 2016 5:28am

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

Answer 9 · 2016-09-13T16:53:46Z

September 13, 2016 4:53pm

That's weird. Thanks anyways! :))

Welcome to the Treehouse Community

Looking to learn something new?

Paula Mourad

Paula Mourad

H3 Stuck to Navigation

9 Answers

nico dev

nico dev

Bryce Santos

Bryce Santos

Paula Mourad

Paula Mourad

Bryce Santos

Bryce Santos

Paula Mourad

Paula Mourad

Bryce Santos

Bryce Santos

Paula Mourad

Paula Mourad

Bryce Santos

Bryce Santos

Paula Mourad

Paula Mourad