Space-between doesn't yield margin

Question

After setting flex-basis for list descendant of class "modes-container" to be 30% and the containing element order-list to have { justify-content: space-between;}. From my understanding, the 10% space remaining between the item elements would be spaced out evenly, acting as margin. However, when deployed, there's no margin between the list element.

I've tried to eliminate stylings such as positioning for <article> but nothing changes. Does anyone have any idea why it's not working? (sorry for the long code sample, I don't know what is messing with it so I have to put all on the table for context)

/* external stylesheet but placed here for readability */

#container {
  position: relative;
  margin-left: 20%;
  margin-right: 20%;
}

header {
  text-align: center;
}

.form-row {
  display: flex;
}

.form-row>input,
.form-row>textarea {
  flex: 1;
  margin-bottom: 10px;
}

aside {
  float: left;
  position: absolute;
  width: 30%;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  background-color: antiquewhite;
}

aside>h3 {
  margin: 10px;
}

aside>input[type="submit"] {
  margin-bottom: 10px;
}

article {
  float: right;
  box-sizing: border-box;
  width: 80%;
  padding-left: 15%;
  padding-right: 15%;
}

#main-text {
  background-color: green;
}

.modes-container {
  background-color: rgba(56, 211, 211, 0.8);
}

.modes-container>ol {
  display: flex;
  justify-content: space-between;
  /*supposedly provides spacing between <li> boxes but doesn't work yet*/
}

.modes-container>ol>li {
  box-sizing: border-box;
  padding: 20px;
  flex-basis: 30%;
  /*doesn't work either*/
  list-style-position: inside;
}

.modes-container li:nth-child(1) {
  background-color: rgba(128, 170, 206, 0.8)
}

.modes-container li:nth-child(2) {
  background-color: rgba(206, 128, 171, 0.8)
}

.modes-container li:nth-child(3) {
  background-color: rgba(164, 128, 206, 0.8)
}

.modes-container li:nth-child(4) {
  background-color: rgba(205, 206, 128, 0.8)
}

.modes-container li:nth-child(5) {
  background-color: rgba(206, 159, 128, 0.8)
}

footer {
  clear: both;
}


/* visualization purpose */

header,
article,
aside,
footer,
#container {
  border-style: solid;
}

<!DOCTYPE html>
<html>

<head>
  <title>Hello, World!</title>
  <link rel="stylesheet" type="text/css" href="assets/style.css">
</head>

<body>
  <div id="container">
    <header>
      <h1>Welcome Music Jedi!</h1>
    </header>
    <aside>
      <h3>Feedbacks are welcomed!</h3>
      <div class="form-row">
        <input type="text" name="first-name" placeholder="First Name" />
      </div>
      <div class="form-row">
        <textarea rows="4" name="description" placeholder="Your thoughts?"></textarea>
      </div>
      <input type="submit" />
    </aside>
    <article id="main-text">
      <h3>Problems with Current Methods</h3>
      <p>Learning the modes has been one of the most mystifying experience amongst music students. These students then become teachers who will then pass on the knowledge and perhaps some of the confusion, thus perpetuating rather than fixing the problem
        in educating modal playing. Here I will teach you the modes the right way which starts with how YOU the listeners hear music rather than visually what the modes are based on, thus making the modes useful in a musical context rather than inapplicable
        knowledge.
      </p>
      <h3>What You Will Learn</h3>
      <ol>
        <li><a href="">Redefining the modes</a></li>
        <li>Relationship to the parent scales as a utility not as a foundation</li>
        <li>Musical examples in classical and pop music</li>
        <li>Application in composition and improvisation</li>
      </ol>
      <ol></ol>
    </article>
    <article class="modes-container">
      <ol type="I">
        <li>I</li>
        <li>D</li>
        <li>P</li>
        <li>L</li>
        <li>M</li>
      </ol>
    </article>
    <footer>Built by Don</footer>
  </div>
</body>

</html>

[**`flex-basis` is not the same as `width`**](https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width) — Paulie_D, May 10 '19 at 08:47
It's also not clear what effect you are trying to acheive 5 x 30% would be too wide for the `modes-container` article. — Paulie_D, May 10 '19 at 09:51
yes flex basis was too high. I was working with another project which had 3 flex items and got the 2 mixed up. All is good now after I reduce the percentage — Dd nguyen, May 10 '19 at 16:59
@Ddnguyen Are you expecting your items in ol to justify themselves? Try giving it to the parent container instead. — jmag, Nov 16 '21 at 14:53

score 0 · Answer 1 · answered May 10 '19 at 10:23

Not quite sure if this is what you want, but check out the fiddle:

https://jsfiddle.net/MichelleFuchs/m3vnawd7/3/

This is the relevant css:

 .modes-container{
        background-color: rgba(56, 211, 211, 0.8);
        padding: 0px;
    }
  .modes-container > ol{
        display: flex;    
        justify-content: space-between; /*supposedly provides spacing between <li> boxes but doesn't work yet*/

        padding: 0px; /*ol does have a left padding, whcih we need to remove*/
        width: 80%; /*10% space left and right*/
        margin: 0px  auto; /*horizontal centering*/
    }
    .modes-container > ol > li{     
        box-sizing: border-box;
        padding: 20px;
        list-style-position: inside;

    }

The modes-container has now full width and no padding. In there is the ordered list, where I also removed the not needed padding on the left. It has only 80% width so that there is some whitespace. Now the li-elements align properly in there - BUT only as long as there is enough space. They need their space and will overflow the flexbox.

flex-basis was the problem. I had the percentage way too high. 30% times 5 = 150%. I had to remove padding as well so that the margin can be significantly visible. Thanks! — Dd nguyen, May 10 '19 at 16:58

Space-between doesn't yield margin

1 Answers1