Hello,

Since you are using only one ul, the outcome you are experiencing is the expected result. It has to do with the CSS rules you used.

.frisbee ul li {
    display: inline-block;
}

This will take all of the lis and put them inline. Your next rules cannot achieve want you want them to.

.frisbee ul li:nth-last-child(-n+3) {
    display block;
}

This CSS rule will take the selected children, and makes each one a block level element, which causes the second "row" you are wanting.

Note: The :nth-last-child(-n+3) selector starts from the last child, moves three elements toward the beginning, and then counts back toward the end again. The same effect can be achieved by counting from the beginning in the first place. :nth-child(n+4) yields the same result.

The moment you apply your next CSS rule, you are putting the selected li back inline.

.frisbee ul li:nth-child(4) {
    display: inline-block;
}

There are a couple ways you can achieve what you want:

1. Use more uls

HTML:

 <div class="frisbee">
     <ul>
        <li></li>
        <li></li>
        <li></li>
     </ul>      
     <ul>
        <li></li>
        <li></li>
     </ul>
     <ul>
        <li></li>
     </ul>
 </div>

CSS:

// This is for that 50px margin you had.
.frisbee {
    margin-top: 50px;
}

.frisbee ul {
    list-style: none;
    margin: 0;
}

.frisbee ul li {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: -3px;
    background-color: black;
    border-radius: 50%;
}

.frisbee ul:nth-child(2) li {
    background-color: red;
}

.frisbee ul:nth-child(3) li {
    background-color: blue;
}

2. Use float and clear

HTML:

 <div class="frisbee">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
 </div>

CSS:

ul {
    list-style: none;
    margin: 50px 0px;
}

.frisbee ul li {
    float: left;
    width: 50px;
    height: 50px;
    margin: -3px;
    background-color: black;
    border-radius: 50%;
}

.frisbee ul li:nth-child(4) {
    background-color: red;
    clear: left;
}

.frisbee ul li:nth-child(5) {
    background-color: red;
}

.frisbee ul li:nth-child(6) {
    background-color: blue;
    clear: left;

This is super awesome. Thanks for the help.

Emma, I was just trying to get them to swing to the next line, but still be inline. I figured I'd tool around with them to get them to be in the exact place once I figured that part out.

Rand, thanks for the advice. I was trying to avoid both those scenarios. The reason I didn't want to use floats is because I have this div sitting on top of a bunch of other divs, and many of them are using ::before and ::after, so I didn't want to have to figure out which one was collapsing or how to apply the clear to generated content. In other words, I was being lazy. But I can see how those would be helpful though.

Jason, thanks for the tip! I totally did not even think about using width on that ul. That solution looks like it will solve my problem, so I really appreciate it!

Thanks!

jon

So, just clarifying...Are you wanting the 2nd and 3rd rows centered under the first, or justified left?