Help with widget

[Darrell F]

I made a widget but when I put them side by side on the portal there are no spaces between them, and they are on top of each other. Do you know what I'm doing wrong?

<div class="widget-container">
<div class="border-container" style="border: 1px solid black; padding: 0; width: 300px; height: 160px; box-sizing: border-box;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div class="image-container" style="width: 200px; height: 150px; box-sizing: border-box;">
<img src={{::options.image}} alt="Button Image" style="width: 100%; height: 100%; box-sizing: border-box;">
</div>
<div class="button-text-container" style="display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box;">
<div class="text-container" style="margin-bottom: 10px;">
{{::options.description}}
</div>
<div class="button-container">
<a href={{::options.button_link}} style="text-decoration: none;">
<button style="padding: 10px 20px; background-color: #2499C2; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 0;">
{{::options.button_text}}
</button>
</a>
</div>
</div>
</div>
</div>
</div>

CSS---

/* Common styles for all instances */
.border-container {
border: 1px solid black;
padding: 0; /* Reset padding */
width: 300px; /* Set the width of the container */
box-sizing: border-box;
margin-top: 20px; /* Add margin to the top of the container */
margin-bottom: 20px; /* Add margin to the bottom of the container */
margin-left: 20px; /* Add margin to the left of the container */
margin-right: 20px; /* Add margin to the right of the container */
}

.image-container {
width: 200px;
height: 150px;
box-sizing: border-box;
}

.image-container img {
width: 100%;
height: 100%;
}

.text-container {
margin-bottom: 10px;
font-family: "OpenSans-Bold", "Open Sans Bold", "Open Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
text-align: left;
padding: .5rem;
box-sizing: border-box;
}

.button-text-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
font-weight: 700;
font-style: normal;
font-size: 16px;
}

.button-container {
margin-top: 10px;
box-sizing: border-box;
}

button {
padding: 10px 20px;
background-color: #2499C2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

/* Spacing between widget instances */
.border-container:nth-child(n+2) {
padding-right: 20px;
padding-left: 20px;
}

[Weird]

You have quite a mess on your hands if you're mixing css in style tags as well.
Try to clean that up so that all your CSS is in the CSS section actually.
Then if your instances end up on top of each other you can try checking the column they're associated to. The size - something values define the box sizes so you might be simply forcing the portal to put them on top of each other as they don't fit next to each other.