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

CSS CSS Layout Techniques Float Layout Why Floats are Used in Web Design

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

I cant align the logo with the lists in the media query

Hello!

If you run the code below, and narrow the viewport to see the effect of media query, you will see that .main-logo is not equal in length with the lists. Can you please tell me how I can get the .main-logo to align in width with the lists.

thanks

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">

<style>
/*=====================================================*/

.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}


/*Styling the .main-header 
===================================================*/   
.main-header{
min-height:100px;
padding:15px;

}


.main-logo, .main-nav, .main-nav li{
float:left;
padding:10px;
}

 .main-logo a, .main-nav a{
display:block;
text-decoration:none;
padding:8px 15px;
color:white;


}
.main-logo{
margin-right:35px;
border-radius:5px;
width:120px;
}
.main-nav li{
margin-right:10px;
margin-top:31px;
border-radius:5px;
}

/*clear fix
==================================================*/
.group::before, .group::after{
content:"";
display:table;
clear:both;


}
/*styling columns
=============================================*/
*{
box-sizing:border-box;

}
.col{
float:left;
padding:20px;
width:50%;


}
.primary-content{
width:50%;

}
.secondary-content{
width:50%

}

/* .main-footer & sticky footer
==========================================*/
.main-footer{
padding:15px;
text-align:center;

}


html, body, .main-wrapper, .col, .container{
height:100%;


}
/*styling the image
=============================================*/
.feat-img{
width:50%;
float:left;
margin-right:25px;
padding:5px;
border: 1px dotted grey;

}
/*media queries
=============================================*/

@media(max-width:768px)
{
    .main-wrapper, 
    .main-logo, 
    .main-nav, 
    .main-nav li,
    .col,
    .main-footer,
    .feat-img
    {
    float:initial;
    margin:intial;
    height:initial;
    width:initial;


    }
    .main-logo{

    margin-right:0;
    margin-bottom:10px;
    }
    .main-nav li{
    margin-top:10px;

    }
    .feat-img{
    width:100%;

    }


}
</style>
</head>

<body>
<div class="main-wrapper">
    <header class="main-header group">
    <h1 class="main-logo"><a href="#">Logo</a></h1>
        <ul class="main-nav group">
            <li><a href="#">Link1 </a></li>
            <li><a href="#">Link2 </a></li>
            <li><a href="#">Link3 </a></li>
            <li><a href="#">Link4 </a></li>
        </ul>
    </header>

  <div class="container group">
        <div class="primary-content col">
            <h2>Primary Content</h2>

            <img class="feat-img" src="http://lorempixel.com/400/300">  
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
            </p>

            <hr/>

            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa 
            </p>
        </div>
        <div id="clear"></div>
</div>

    <footer class="main-footer">

        <p>&copy; 2014 Example Layout </p>

    </footer>
</div>
</body>
</html>

4 Answers

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi, No problem :)

There was 2 parts to the issue:

1) You were setting a 10px right margin on .main-nav li - See this image (the orange represents the margin)

2) Margin/Padding was also being set on the ul (.main-nav)- See this image

Had to play around with it a bit and move some of the code inside the media query as just removing the margin from .main-nav li on line 45 caused the layout to break when the viewport was larger see here - notice how the li's are all bunched together.

Hopefully that explains it, let me know if it makes sense :)

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi, gave it a go and this seemed to work for me:

// I added this rule inside the media query:
.main-nav {
  margin: 0;
  padding: 0;
}

// And removed the right margin from .main-nav li (inside the media query again)
.main-nav li {
  margin-top: 10px;
  margin-right: 0;
}

// Also added a rule to main-nav li (in your main-header section) to get rid of ugly bulletpoints:
.main-nav li{
  margin-right:10px;
  margin-top:31px;
  border-radius:5px;
  list-style: none;
}

Hope this helps!

EDIT: updated the post a bit as my first go worked for narrow viewports but not wider ones

Full code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">

<style>
/*=====================================================*/

.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}


/*Styling the .main-header 
===================================================*/   
.main-header{
min-height:100px;
padding:15px;

}


.main-logo, .main-nav, .main-nav li{
float:left;
padding:10px;
}

 .main-logo a, .main-nav a{
display:block;
text-decoration:none;
padding:8px 15px;
color:white;


}
.main-logo{
margin-right:35px;
border-radius:5px;
width:120px;
}
.main-nav li{
margin-right:10px;
margin-top:31px;
border-radius:5px;
list-style: none;
}

/*clear fix
==================================================*/
.group::before, .group::after{
content:"";
display:table;
clear:both;


}
/*styling columns
=============================================*/
*{
box-sizing:border-box;

}
.col{
float:left;
padding:20px;
width:50%;


}
.primary-content{
width:50%;

}
.secondary-content{
width:50%

}

/* .main-footer & sticky footer
==========================================*/
.main-footer{
padding:15px;
text-align:center;

}


html, body, .main-wrapper, .col, .container{
height:100%;


}
/*styling the image
=============================================*/
.feat-img{
width:50%;
float:left;
margin-right:25px;
padding:5px;
border: 1px dotted grey;

}
/*media queries
=============================================*/

@media(max-width:768px)
{
    .main-wrapper, 
    .main-logo, 
    .main-nav, 
    .main-nav li,
    .col,
    .main-footer,
    .feat-img
    {
    float:initial;
    margin:intial;
    height:initial;
    width:initial;


    }
    .main-logo{

    margin-right:0;
    margin-bottom:10px;
    }

        .main-nav {
            margin: 0;
            padding: 0;
        }

    .main-nav li{
    margin-top:10px;
        margin-right: 0;   
        }

    .main-nav li{
    margin-top:10px;

    }
    .feat-img{
    width:100%;

    }


}
</style>
</head>

<body>
<div class="main-wrapper">
    <header class="main-header group">
    <h1 class="main-logo"><a href="#">Logo</a></h1>
        <ul class="main-nav group">
            <li><a href="#">Link1 </a></li>
            <li><a href="#">Link2 </a></li>
            <li><a href="#">Link3 </a></li>
            <li><a href="#">Link4 </a></li>
        </ul>
    </header>

  <div class="container group">
        <div class="primary-content col">
            <h2>Primary Content</h2>

            <img class="feat-img" src="http://lorempixel.com/400/300">  
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
            </p>

            <hr/>

            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa 
            </p>
        </div>
        <div id="clear"></div>
</div>

    <footer class="main-footer">

        <p>&copy; 2014 Example Layout </p>

    </footer>
</div>
</body>
</html>
orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello James,

That totally works, thanks. Can you please tell me what caused the .main logo to be disproportionately bigger than the lists.

thanks!!!

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thank you so much James. Just out of curiousity, how did get the print screen images into these blue links 'this image', 'see here'

Cheers!

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

I used dropbox to host the images (saved in 'public' folder > right click > copy public link to get the url).

Then used markdown to add them to my post. See the markdown cheatsheet below or check out this guide.