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 trialjason limmm
8,009 Pointsneed 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
Treehouse StaffHey 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 🧑💻