Fixing margin(?) issue

Hey! so in image, you'll notice that the first Select (with the text "All" is more to the right due to the others having an X, which the first one doesn't need
I already attempted with an "::after"
it didn't help

I already tried putting a margin-left as well as padding-left on the X, it didn't help
I also tried the opposite, a padding & margin right on the select
Didn't help either

it just doesn't want to re-arrange itself...
Could it be bc the parent element is on margin:auto ?

HTML

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

CSS

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

(Only added the code related to the issue, if you desire a codepen version, please give me about max 20 hours depending on when requested as I'll be out tomorrow)

Choo♚𝕂𝕚𝕟𝕘•8/27/23, 1:13 AM

The text-align is inherited and affects the position of the select elements. Apply text-align:left to dialog-gameSelectors.

BrightieOP•8/27/23, 8:40 AM

alright I'll give that a try when im back