HTML 元素无法正确调整大小 - 间距？

Question

I am trying to keep the same ratio for my html elements and same distance but whenever I resize the window, the objects don't have the same spacing. I am not sure what exactly is issue as I have played around with the margins/padding and neither of those work.

Screen smaller

Should look like this

Answer 1

Its better if you can use bootstrap classes instead of using custom css. Anyway you can use this.

.parent{
 display: flex;
 justify-content:space-between;
}

.child{
 display: inline-block
}

Answer 2

You can use below basic styling to fix above issue:

.parent {
 display: flex;
 justify-content:space-between;
}

.child {
 width: 100%;
 padding: 1rem;
}