If we have understood it correctly, you aim to have 3 elements side by side but the 3 elements should be centered horizontally right?
Hoom…see if you can translate this code
The below snippet is just an example of what you are trying to achieve. Please replace as per your requirements.
I have used random tags and class names… just to demonstrate
<div class='box1'> box1 </div>
<div class='box2'> box2</div>
<div class='box3'> box3</div>
- display: flex; will align the box1,box2,box3 within the parent in a row
- justify-content: center; will align all of those three in the center horizontally along the main axis - that is X-axis. Since by default flex aligns items in a row.
If you are finding flexbox hard, you can check out my blog - where I have tried to simplify the concept of flexbox : flexbox simplified
It is just a few mins read!