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

My header is broken - responsive design

Hello, Treehouse members!

So, after finishing my first course I've decided to create a website to see how much I've learned, but I got into a problem. My header is not responsive, when I use the float on the logo and then on the nav it goes crazy. Please, can you help me?

The source code: https://mega.co.nz/#F!PhUE2QCZ!Q82LncjA5_Al-50Zfn25TA

I hope that you can help me. Thank you!

1 Answer

Omar Emara
Omar Emara
18,249 Points

Hi Radu, What was messing up your layout is that you needed to add a css rule of display: inline-block to the header element, to make the child elements display side by side.

I also recommend you to take a look on float and clear css properties.

Here is your new css.main

/* ---------------
GENERAL
-----------------*/

body {
    font-family: "Open Sans", sans-serif;
    background-color: #F2EBBF;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    margin-top: 0px;
    padding: 0 5%;

    margin-top:100px;
}

h1 {
    font-size: 2em;
    padding: 0;
    margin: 0;
}

h2 {
    font-size: 1em;
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}




/* ---------------
HEADER
-----------------*/

header {
    width: 100%;
    background-color: #8CBEB2;
    display:inline-block;
    padding-bottom:20px;
}

header #logo {
    text-align: center;
    padding: 25px 0 0;

}

header #logo a {
    color: white;
    font-weight: bold;
}




/* ---------------
NAVIGATION
-----------------*/

nav {
    margin-top: 25px;
    background-color: #72BEB2;

}

nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;

}

nav ul li{
    display: block;
    padding: 10px 0;
}

nav ul li:hover {
    background-color: #4DBEB2;
}

nav ul li.selected {
    background-color: #4DBEB2;
}

nav a {
    font-weight: 400;
    color: white;
}

/* ---------------
FOOTER
-----------------*/

footer {
    padding: 0;
    margin: 0;
    text-align: center;
    clear: both;
}

#social {
    margin: 0;
    padding: 50px 0 0;
    width: 100%;
}

#social li {

    display: inline-block;
}

#social li a img {
    width: 30px;
    height: 30px;
}

footer p {
    margin: 0;
    padding: 0;
}

/* ---------------
PAGE: Portfolio;
-----------------*/

    /* ---------------
    IMAGE GALLERY
    -----------------*/

    #image-gallery {
        margin: 0;
        padding: 0;
    }

    #image-gallery li {
        float: left;
        width: 90%;
        margin: 0 5%;
        background-color: #F3B562;
        padding: 0;
        margin-bottom: 50px;
    }

    #image-gallery li p {
        padding: 5%;
        margin: 0;
        color: #5C4B51;
    }





/* ---------------
PAGE: About;
-----------------*/

section #profile-picture {
    display: block;
    max-width: 200px;
    height: 200px;
    border-radius: 100%; 
    margin: 0 auto;
    margin-bottom: 50px;
}




/* ---------------
PAGE: Contact;
-----------------*/


    /* ---------------
    GENERAL INFO
    -----------------*/

    #general-info p {
        font-size: 0.875em;
    }


    /* ---------------
    CONTACT
    -----------------*/

    #contact ul {
        padding: 0;
        margin: 12px 0 0;
    }

    #contact a {
        color: #F06060;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        display: block;
        padding: 0 0 0 30px;
    }

    #contact .facebook a {
        background-image: url("../img/facebook-contact.png");
    }

    #contact .mail a {
        background-image: url("../img/mail-contact.png");
    }

Thank you! You truly deserve a cookie!