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
John Lukacs
26,806 Pointsflexbox
@charset "UTF-8";
/* CSS Document */
ul li {
list-style:none;
color: white;
text-decoration:none;
text-align:center;
padding: 5px 15px;
background-color: #2ED39C;
margin: 5px 15px;
}
.main-header {
background-color: #000000;
}
.logo a {
font-size: 36px;
color: #9764E6;
text-decoration: none;
}
.main-nav {
display:flex;
align-self:center;
height:100%;
flex-direction:row;
}
.logo:visted
{
color#C30F12;
}
Anybody know why my flexbox is not working.
12 Answers
Ryan Field
Courses Plus Student 21,242 PointsOkay, so what's going on here is that you are adding display: flex; to the nav element, but I'm assuming you want the li elements to line up horizontally. It may seem strange, but a ul is actually a container, and since flex display only applies to the first children of a flex container, it is trying to line up the ul horizontally (which it is doing). If you switch the main-nav class to the ul, it should appear how you want it to.
Just a few other notes, you have some syntax errors in the last declaration in your CSS.
This:
.logo:visted
{
color#C30F12;
}
should be this:
.logo:visited
{
color: #C30F12;
}
Hope that helps! :)
John Lukacs
26,806 PointsIts stacking the list items why is this
Ryan Field
Courses Plus Student 21,242 PointsHi, John. It's hard to tell without seeing your HTML as well what's going on. However, flexbox involves declarations for both the parent container and the child elements that you are trying to align. When I get stuck, I always refer CSS Tricks' flexbox guide. You can take a look there and if you still can't figure it out, post your HTML and we'll try and help you out! :)
John Lukacs
26,806 Points<body>
<header class="main-header">
<nav class="main-nav">
<ul><li class="logo"><a href="#">logo</a></li>
<li><a href="#">nav 1</a></li>
<li><a href="#">nav 2</a></li>
<li><a href="#">nav 3</a></li>
<li><a href="#"> nav4 4</a> </li>
</ul>
</nav>
</header>
</body>
</html>
Ryan Hi I added flex to all children lists and anchor it did not work they are still stacked blocks
John Lukacs
26,806 PointsHa it worked like a charm. Thanks for helping me out on this one. Now my day can go on.
Ryan Field
Courses Plus Student 21,242 PointsYou're very welcome. :D
John Lukacs
26,806 PointsHi! Do you have any idea how to align links to the right my margin right: auto is not working.
Ryan Field
Courses Plus Student 21,242 PointsYou could try text-align: right; and see if that gets what you're trying to do.
John Lukacs
26,806 Points.logo:first-child {
margin-right: auto;
}
John Lukacs
26,806 PointsThe margin will take a interger value such as 50 px
John Lukacs
26,806 PointsNo and I tried justify-content: flex-end. I don't like flex box
Ryan Field
Courses Plus Student 21,242 PointsAww, it's great once you get to know it better! ;)
Is it just the li elements that you're trying to align to the right?
John Lukacs
26,806 PointsTHe logo is in the list items. Im not wanting to align that what was your idea
Ryan Field
Courses Plus Student 21,242 PointsIf you want to have the logo justified left and the menu items on the right, you may need to take the logo out of your list. Then, you should be able to put justify-content: flex-end on the ul and have the nav items appear on the right.
John Lukacs
26,806 Pointsul {
display:flex;
justify-content: flex-end;
}
Its not doing what its aspose to do even with this code
Ryan Field
Courses Plus Student 21,242 PointsIt should align the items to the right, like you can see in this pen.
John Lukacs
26,806 PointsIt seems if you specify display: flex in multiple selectors the poperties like justify content don't work.
Ryan Field
Courses Plus Student 21,242 PointsYou only have to use display: flex; on the parent element, but there are other declarations you can make on the children elements, as outlined in the cheat sheet that I linked above.