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

Posted by Aris Constantinou
Aris Constantinou
2,687 Points

My nav list items are messed up

Hi, i have this website: www.lifeofaris.se/tree and at the breakpoint: min-width:1600px, my nav list items are not "in line" because the two big words are getting more space, is there any way to make all symmetrical without messing with the font-size property?

Code if you want: 

@media screen and (min-width: 798px) {
    .container{max-width: 990px;}
    .box{float:right;position: relative;}
    .logo{clear: both;}
    .logo img{width:100%; max-width:92px;}
    #i-nav{
        display: none;
    }
    nav{
        clear: both;
        display: block;
    }
    nav ul{
        padding:0;
        margin:0 auto;
    }
    nav li{
        display: inline-block;
        width:350px;
        margin:1% 2% 1% 2%;
    }
    nav a{
        font-size: 1.3em;
        padding:10%;
    }
    .logo{float:left;width:500px;height:0px;}
    .name{clear: both;margin:0;height:0px;}
    .info {background-image: url(../img/social.png);background-repeat: no-repeat; display: inline-block;width:529px;padding-top: 11%; padding-bottom: 11%;}
    .fb img{width:15%;}
    .box{position: relative;}
    .fb, .emergency{position: absolute;top:36px;right:1px;}
    .emergency{margin-top:3%;}
    .slider{max-width: 85%;}
    #gallery{max-width:100%;margin:0 auto;}
    #gallery li{width:40%;margin-right:-20px;margin-left: 65px;}
    .boxes{margin-top: -1%}
    .latest{max-width:85%;margin:0 auto;}
    footer p{font-size: 1.2em;}
}

@media screen and (min-width: 1290px) { /*Desktop Version*/
    .container{max-width:1200px;}
    .box{width:609px;}
    #i-nav{
        display: none;
    }
    nav{
    }
    nav ul{
        padding:0%;
    }
    nav li{
        display: inline-block;
        margin:0% 0.9% 0% 0.1%;
        padding:0;
        width:15%;
    }
    nav a{
        font-size:1em;
        padding:11%;
    }
    .name{margin: 0;}
    .info {
    display: inline-block;
    width: 530px;
    margin-top: 0; 
    margin-right: 5%;
    padding: 5% 0% 13% 10%;
    }
    .fb, .emergency{float: right;top:28px;}
    .slider{max-width:100%;margin-top: 1%;}
    .boxes{max-width:100%;}
    #gallery{}
    #gallery li{margin-left:0;width:18%;margin-right:0.9%;float:none;display:inline-block;width:24%;} 
    #gallery li:nth-child(4n) {margin:0;}
    .latest{max-width:100%;margin-left:0%;,margin-right:0%;padding-bottom: 4%;}
    #galleryproducts li{float:none;width:18%;display: inline-block;margin:2.3%;}
    #galleryproducts li:nth-child(1n) {margin-left:4%;}
    footer p{font-size: 1.2em;}

}   @media screen and (min-width: 1600px){
    header{width:1009px;margin:0 auto;}
    .logo img{float:left;width:400px;margin-top:2%;}
    .name{float:left; margin-top: 6.5%;
    margin-left: 9%;}
    .info{ width:500px;float:right;margin:0 auto}
    nav ul{padding:0%;}
    nav li{display: inline-block;margin: 0% 0.9% 0% 0.1%;
    padding:1%;
    width: 15%;}
    nav a{font-size:1em;}
    footer p{font-size: 1.2em;}
}

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

There's several ways to fix this, but perhaps the easiest is to display your menu using flexbox.

If you're not already familiar with this concept, it is covered in some of the CSS courses, like CSS - Beyond the Basics and CSS Layout Techniques, and I noticed there is now a course for it specifically: CSS Flexbox Layout.

If you want a quicker introduction, there's also this workshop video: Build a Responsive Navigation with Flexbox which seems (from the title) perfect for your application.

Aris Constantinou
Aris Constantinou
2,687 Points

thanks, i will look in to it right now :)