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 Wrapping Items and Distributing Space

Rodrigo Angulo
Rodrigo Angulo
13,378 Points
Posted by Rodrigo Angulo
Rodrigo Angulo
13,378 Points

Help. This won't go through, I feel like its right.

Am I missing something anywhere?

style.css 
/* Complete the challenge by writing CSS below */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

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

.item-6 {
  margin-right: auto;
}
index.html 
<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Layout</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="row">
    <div class="item-1 item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item-6 item">Item 6</div>
  </div>
</body>
</html>

3 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,708 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,708 Points

No need to target any .item-# in this challenge. The following line "automatically" handles the margins for you by distributing equal space. Gotta love Flexbox!

justify-content: space-between;
Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points
Dale Severude
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points

Hi Rodrigo, You have the correct answer in your row css class. That is all you need. Don't change anything in index.html and remove your item-1 and item-6 css code.