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 Gustavo Winter
Gustavo Winter
Courses Plus Student 27,382 Points

Help me with flexbox ORDER

I can't make the list items change the orders. this is my code, i dont understand where is wrong, if someone can tell me where and why is wrong, i will appreciate.

this is my code. (It's similar to the one in the class "Css Flex layouts".

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>

    <header class="main-header">
        <h1 class="name"><a href="#">Best City Guide</a></h1>
        <ul class="main-nav">
            <li><a href="#" class="item-1 item">Home</a></li>
            <li><a href="#" class="item-2 item">Library</a></li>
            <li><a href="#" class="item-3 item">About</a></li>
            <li><a href="#" class="item-4 item">Contact</a></li>
            <li class="item-5 item"><a href="img/nasa.jpg"><img src="img/nasa.jpg" class="photo"></a></li>
        </ul>
    </header><!--/.main-header-->

    <div class="banner">
        <img class="logo-city" src="img/city-logo.svg" alt="City">
        <h2 class="headline">The Best City</h2>
        <span class="tagline">The best drinks and eats in the best city ever.</span>
    </div><!--/.banner-->

    <div class="row container-one">
        <div class="primary col">
            <h2>Welcome!</h2>
            <p>Everything in this city is worth waiting in line for!</p>
        </div><!--/.primary-->
    </div>

    <footer class="main-footer">
        <div class="footer-inner">
            <span>&copy;2015 Residents of The Best City Ever.</span>
        </div>
    </footer>

</body>
</html>

.main-header,
.main-nav {
    display: flex;
}
.row {
    display: flex;
}

@media (min-width: 769px) {

    .main-header,
    .main-nav {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    }
.item-6 {
    order: -5;
}

    h1 {
        margin-left: 25px;
        margin-right: auto;
    }
    ul {
        margin-right: 10px;
    }




}

@media (min-width: 1025px) {



}

 {
    box-sizing: border-box;
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
    margin-top: 0;


}
a {
    text-decoration: none;
}

ul {
    list-style: none;
}
li {
    margin-left: 10px;
    margin-bottom: 15px;
}

.banner {
    background-color: lightgrey;
    color: black;
    text-align: center;
    padding-bottom: 10px
}

.logo-city {
    width: 160px;
    padding-top: 10px
}

.main-header {
    background-color: green;
}

.row {
    background-color: blue;
    flex: 1;
}

.main-footer {
    background-color: grey;
}

.item {
    background-color: white;
    border-radius: 5px;
    padding: 5px 25px;
}

.photo {
    max-width: 125px;
} ```