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 Flexbox Layout Flexbox Properties Distributing Space Inside a Flex Container

Posted by S Campos
S Campos
413 Points

CSS Flexbox Layout -- Section 2 -- Video3 -- @4:38

The item rule he uses here .item-1{margin-right: auto;} is not working for me. but everything else up to this point has.

Heres my html:

  <div class="Container">
    <div class="items item-1"> 1) </div>
    <div class="items item2"> 2) </div>
    <div class="items item3"> 3) </div>
    <div class="items item4"> 4) </div>
    <div class="items item5"> 5) </div>
    <div class="items item3"> 6) </div>
    <div class="items item4"> 7) </div>
    <div class="items item5"> 8) </div>
  </div>

Here's my CSS:

.Container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.items{
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 3px;
}

.item-1{
  margin-right: auto;
}

-- it works when I remove .items class completely, OR if I use an ID instead of a class for item-1 for instance:

#item-1{
  margin-right: auto;
}

and have the html as 

    <div id="item-1" class="items"> 1) </div>

Thanks in advanced!

S Campos
S Campos
413 Points

Weird. Yes I tried chrome firefox opera and safari -- all same. You said it looked right to you Did you read the code or implement it?

Here's my entire html doc (index.html) 

<!DOCTYPE html>
<html>
<head>
  <title> FLEX BOX SUPER</title>
  <link href="css/main.css" rel="stylesheet" >
</head>
<body>
  <h3>Flex12 -- title</h3>


  <div class="container">
    <div class="item-1 item" >1) </div>
    <div class="item-2 item">2) </div>
    <div class="item-3 item">3) </div>
    <div class="item-4 item">4) </div>
    <div class="item-5 item">5) </div>
    <div class="item-6 item">6) </div>
    <div class="item-7 item">7) </div>
    <div class="item-8 item">8) </div>
  </div>


</body>
</html>

Here is my CSS file:

/* main  */

*{
 box-sizing: border-box;
}

body{
  background: white;
  font-family: arial;
  font-size: 1.35em;
  padding-left: 5%;
  padding-right: 5%;
}


.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: grey;
  padding: 10px;
  border-radius: 5px;
  margin: 45px auto;
}

.item-1{
    margin-right: auto;

  }

.item{
  background: white;
  color: black;
  padding: 15px;
  margin: 5px;
  border-radius: 3px;
  }

3 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Your original CSS works fine for me. It might be some peculiarity of the browser, can you try a different one?

Also, do you have any other CSS not shown here? I wouldn't expect it to make any difference what kind of selector is used, except that if there is a conflict with other CSS, the specificity of an id selector is higher than a class selector.

The order is also important, but the order shown here (".items" before ".item-1") is correct. The behavior you describe is what I would expect if the rules were listed in the opposite order.

S Campos
S Campos
413 Points
S Campos
S Campos
413 Points

Looks like it doesn't like the .item tags anymore because when I remove them from the html it works... After dissecting the .item tag... Looks like the margin: 5px was messing it up.... not sure why...

When I use ID="item-1" instead of as a class the margin:5px doesn't mess it up.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

The CSS you posted the 2nd time has the rule for ".item-1" before ".item". That's exactly what I was talking about in my answer. For the class selector to work correctly, ".item" must come first, with ".item-1" after, as you had it in the first example.

S Campos
S Campos
413 Points
S Campos
S Campos
413 Points

Hey Steven Thanks again for responding, I was able to fix the problem because of you!

I thought you were saying that the order the classes were listed in the html file was the problem. What you really meant was that the order of the .classes{} were listed on the css file was the problem.

Side note* The order your css files are linked to your html also matters main.css should be first then flex.css

If you have flex.css listed first you will have the same problem as me.