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

HTML

jason limmm
jason limmm
7,581 Points
Posted by jason limmm
jason limmm
7,581 Points

need help

        <div class="container my-4">
            <div class="row">
                <div class="col">
                    <h3 class="display-3 ml-auto">Schedule</h3>
                    <ul class="list-group">
                      <div class="d-flex justify-content-between">
                        <li class="list-group-item">
                          <h5 class="mb-1 order-2">pizza eating session</h5>
                          <span class="badge rounded-pill text-bg-success p-2 order-1">9:00</span>
                        </li>
                      </div>
                      <li class="list-group-item">pizza eating session</li>
                      <li class="list-group-item">pizza eating session</li>
                      <li class="list-group-item">pizza eating session</li>
                      <li class="list-group-item">pizza eating session</li>
                    </ul>
                </div>
            </div>
        </div>
      </div>

i want it to be something like this https://imgur.com/a/zRBz5fp

1 Answer

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hey jason limmm 👋

When asking a question in the forum please make sure to include sufficient details regarding your problem and the steps you have taken so far to address it. For guidance on how to post a question, please watch the video on Posting a Question.

I will proceed under the assumption that you are encountering challenges separating the h5 and span elements: Based on the classnames you are using, it appears that you are applying display: flex; to a div containing only a single li element. Given that there is just one item in the flex container, adding the justify-content: space-between; won't have any effect.

To fix this issue, you'll want to transfer those classes to the li instead of the div. The li is the parent of the h5 and span elements so changing that element to be a flex container would allow you to distribute the remaining space in between those items.

Hope this helps!

Happy Coding 🧑‍💻