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

Posted by Linus Karlsson
Linus Karlsson
7,402 Points

Footer moves to the left, footer outside <body>

Hi all!

I'm building my first website and I'm stuck with two annoying problems.

  1. When I set my footer in desktop viewing, i.e. "@media (min-width: 769px)", the footer gets pushed all the way to the left. I want to set it to center, i.e. I want to cut 15% of the footer on both the left and the right.

  2. Viewing in both desktop and mobile coding there is some space added outside the <body> element that I don't have any idea of how to remove, just above the top img (the logo) and also between the "wrap" and the "footer". When I'm using the inspector tools in both Chrome and Safari it actually looks like the entire footer is placed outside the <body> closing tag, </body>

Does anybody have any idea of how to fix these two issues? Does anybody know of good classes that I can watch here on teamtreehouse.com that will be helpful to me?

Here is the HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>inResonance | always in tune</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Dosis|Roboto+Slab" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="wrap">
            <header class="main-header">
                <div class="container">
                    <a href="index.html"><img src="img/FINAL inRes logo with wifi symbol (with orange i).png" class="inres-logo"></a>
                    <nav>
                        <ul>
                            <li><a href="index.html">Latest</a></li>
                            <li><a href="suppliers.html">Suppliers</a></li>
                            <li><a href="us.html">Us</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <div class="container">
                <div class="page-info">
                    <p>[latest updates will go here]</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <a href="https://www.facebook.com/InResonanceAB/"><img src="img/facebook-logo.png" alt="Facebook Logo" class="social-icon"></a>
            <a href="https://www.linkedin.com/in/ronny-carlsson-7311906/"><img src="img/linkedin-logo.png" alt="LinkedIn Logo" class="social-icon"></a>
            <div class="footer-text">&copy; inResonance AB 2017</div>
        </div>
    </body>
</html>

Here is the CSS

/***********************************************************
GENERAL
************************************************************/

body {
    font-family: 'Roboto Slab', serif;
}

.container {
    width: 100%;
}

a {
    text-decoration: none;
}



/***********************************************************
HEADING
************************************************************/

.inres-logo {
    display: block;
    margin: 6px auto;
    width: 300px;
    padding-left: 1.5em;
    padding-right: 1.5em;
}



/***********************************************************
NAVIGATION
************************************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 10px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-weight: 800;
    padding: 10px 30px;
}



/***********************************************************
SPECIFIC PAGE INFO
************************************************************/

.page-info {
    min-height: 420px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    background-image: url('../img/FINAL Smithdiagram.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}



/***********************************************************
FOOTER
************************************************************/

.footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top-style: solid;
    border-width: 1px;
    border-color: #FF9200;
}

.social-icon {
    width: 30px;
    margin: 6px 2px 0 2px;
}

.footer-text {
    font-size: 0.75em;
    margin: 2px 0 6px 0;
}



/***********************************************************
COLORS
************************************************************/

/* site body */
body {
    background-color: #fff;
    color: #696969;
}

/* orange nav */
header {
    background: #fff;
}

/* nav section */
nav {
    background-color: #FF8100;
}

/* nav link */
nav a, nav a:visited {
    color: #fff;
}

/* hover nav link */
nav a:hover {
    color: #FF5400;
}

/* specific pages */
.page-info {
    background-color: #fff;
}

/* darkgrey footer */
.footer {
    background-color: #fff;
    color: #696969;
}



/***********************************************************
MEDIA QUERIES
************************************************************/

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 100px);
    }

    .inres-logo {
        display: block;
        margin: 20px 15px 15px 60px;
        width: 340px;
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    .container {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
    }

    .page-info {
        width: 65%;
        max-width: 1000px;
        margin: 0 auto;
        background-size: 40%%;
        background-repeat: no-repeat;
        background-position: center;
    }

    p {
        margin: 0 0 -10px -50px;
    }

    .footer {
        bottom: 0;
        width: 70%;
    }
}

I'm very grateful for all the help I can get!

Linus Karlsson
Linus Karlsson
7,402 Points

Yes, thank you Steven! I am doing it as we speak, it's just not so clear to me all the time ;-)

I've been going over these margins so many times now...

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Probably the easiest way to center the footer is to apply a left margin:

    .footer {
/*      bottom: 0;    not needed, set in "footer" section above */
        width: 70%;
        margin-left: 15%;
    }

Since the footer is absolutely positioned, it may indeed appear outside the body region. And both the body and the image (via class "inres-logo") have top margins which keep the image away from the upper window edge.

Linus Karlsson
Linus Karlsson
7,402 Points

Thank you so much! The margins at the body and the image, are they editable? And how?

Would this also mean that the img I use as a background in “page-info” has margins that keeps a white space between itself and the footer?

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

In your media query, there's a rule for ".inres-logo" that includes this setting:

        margin: 20px 15px 15px 60px;

So you could reduce the margins there. And you can add "margin: 0;" to the "body" rule.

This might be a good time to get acquainted with the dev tools in the browser to investigate where spaces are coming from.