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

Ryan Canty
PLUS
Ryan Canty
Courses Plus Student 5,665 Points
Posted by Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

Why is my content overlapping my footer?

My content on the bottom of my page seems to be overlapping my footer.... I can't for the life of me solve this issue. I will paste the relevant portion of my html and css so maybe you could let me know what I am doing wrong, thanks! HTML:

<div class="contact">
    <h1 id="contact" class="sec-title">Contact</h1>
        <p class="contact-text"><a class="email-link" href="mailto:rcanty42@gmail.com">Send an email</a>, or copy my address <br/> from the input below.</p>
        <h1 class="email-address">rcanty42@gmail.com</h1>
    </div>



<footer>
    <ul class="main-nav">
        <li class="nav-item"><a href="#about">About</a></li>
        <li class="nav-item"><a href="#portfolio">Portfolio</a></li>
        <li class="nav-item"><a href="#skills">Skills</a></li>
        <li class="nav-item"><a href="#contact">Contact</a></li>
    </ul>
</footer>   
</body>
</html>```




CSS:

.main-nav { text-align: center; margin: auto; width: 100%; padding-top: 20px; }

.nav-item { display: inline-block; font-size: 1.3em; list-style: none; color: white; padding: 0 4%; font-weight: lighter; } /--- Intro ---/ a { text-decoration: none; color: white; }

a:hover { color: grey; }

contact {

color: white;
padding-top: 1em;

}

.contact { text-align: center; background: #2980b9 url('https://static.tumblr.com/03fbbc566b081016810402488936fbae/pqpk3dn/MRSmlzpj3/tumblr_static_bg3.png') repeat 0 0; -webkit-animation: 10s linear 0s normal none infinite animate; -moz-animation: 10s linear 0s normal none infinite animate; -ms-animation: 10s linear 0s normal none infinite animate; -o-animation: 10s linear 0s normal none infinite animate; animation: 10s linear 0s normal none infinite animate; }

.contact-text { text-align: center; font-weight: 100; letter-spacing: .25px; line-height: 2; color: white; padding-bottom: 1em; font-size: 1.5em; }

.email-link { color: lightblue; font-weight: 500; }

.email-address { text-align: center; color: white; font-weight: 100; margin: auto; display: inline-block; border: 1px solid lightgray; border-radius: 10px; background: rgba(52, 73, 94, .6); letter-spacing: 1.5px; padding: 10px 50px; }

.email-address:hover { background: rgba(52, 73, 94, .8); }

                            /*--- Footer ---*/

footer { height: 60px; background: #2c3e50; }```

Kieran Barker
Kieran Barker
15,028 Points
Kieran Barker
Kieran Barker
15,028 Points

Please can you format all this correctly and let me know when it's done? Then it will be so much easier to help you. You just need to put three BACKticks (`) on the line before and after your code. Thanks! :)

1 Answer

Anthony Quinn
Anthony Quinn
4,432 Points

It's hard to tell because the code portion isn't formatted well, but it looks like you have two issues.

  1. You seem to have left off the period '.' in font of your .contact{} selector. As it is in your code, the browser is looking for an html element called contact to apply that rule to. To make it a class selector, make sure you get the period at the start.
  2. The padding is being applied to the top of your contact class, you have nothing to define padding below. You could add a padding-bottom, or combine the two paddings with the short hand like this.
.contact {
color: white;
padding: 1em 0;
}

That should put a bit of buffer between the contact content and your footer information.