CSS CSS Flexbox Layout Flexbox Properties Wrapping Items and Distributing Space

Rodrigo Angulo
Rodrigo Angulo
11,357 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 25,637 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
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,287 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.