Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Ryan Canty
PLUS
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

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

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.