display: flex;: Makes the demo-container; a flexbox, so the children (the buttons) can be aligned.justify-content: space-around;: Distributes the space around each button evenly, ensuring there's equal space before the first button, between the buttons, and after the last button.
<div class="demo-container">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
.demo-container {
display: flex;
flex-direction: row;
gap: 20px;
justify-content: space-around
}