Bootstrap. Есть 2 блока, почему один из них сдвинут влево?

Question

[mixerstyle]

Есть разметка Bootstrap, внутри блока container есть 2 блока header i converter. Вопрос, почему блок converter сдвинут левее немного а header стоит как и хотелось?

Верстка

<div class="container">
    <div id="header" class="col-xl-12 d-xl-flex">
        <div class="col-xl-8 text-center">
            <span class="align-middle">Select currency to exchange:</span>
        </div>
        <div class="col-xl-4 text-center">
            <select id="currencyChanger">
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
                <option value="RUB">RUB</option>
                <option value="GBP">GBP</option>
            </select>
        </div>
    </div>
    <div id="converter" class="row col-xl-12 text-center">
        <div class="col-xl-4">
            <div id="ethereum">
                s
            </div>
        </div>
        <div class="col-xl-4">
            <div id="litecoin">
                s
            </div>
        </div>
        <div class="col-xl-4">
            <div id="bitcoin">
                s
            </div>
        </div>
    </div>
</div>

Стили

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  background-size: cover !important;
  background-color: #0F1E27 !important;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-image: url("./img/bg.png");
  #header {
    min-height: 98px;
    color: #ffffff;
    margin-top: 68px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    border: 1px solid #2b3b45;
    -webkit-border-radius: 5px;
    background-color: rgba(255, 255, 255, .02);

    div {
      line-height: 98px;
    }

    span {
      font-size: 32px;
    }

    select {
      width: 297px;
      height: 55px;
      padding: 15px;
      color: #ffffff;
      line-height: 55px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      border: 1px solid #92e8fe;
      -webkit-border-radius: 5px;
      background: #1e252b;
    }
  }

  #converter {
    #ethereum, #litecoin, #bitcoin {
      min-height: 355px;
      border-radius: 5px;
      background-color: red;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    }
  }
}

Ну и картинка как это выглядит

Answer 1

[Виктор Янышев]

Потому что row

Comments

[mixerstyle]

Спасибо, чот не докумекал. Заменил row на d-xl-flex