Как исправить кнопки, показанные как лестницы

Question

Для моей стажировки мне нужно работать с Wordpress.Все хорошо, но мои пользовательские html и css не отображаются должным образом, и я не могу найти проблему.

Я немного ломаю голову, и странно то, что мой код показывает правильнона JSFiddle , но на сайте нет.

.btn-group button {
  padding: 10px 24px;
  float: left;
  min-width: 190px;
  max-width: 250px;
  font-size: 22px;
  display: inline-block;
}

.btn-group button:not(:last-child) {
  border-right: none;
}

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

#zonnepanelen {
  background-color: #189538;
  border: 1px solid #189538;
  color: white;
  width: 33%;
  height: 80px;
}

#dakbekleden {
  background-color: #ff990a;
  border: 1px solid #ff990a;
  color: white;
  width: 33%;
  height: 80px;
}

#asbest {
  background-color: #0a5cff;
  border: 1px solid #0a5cff;
  color: white;
  width: 33%;
  height: 80px;
}

<div class="btn-group">
  <button id="zonnepanelen"><b>Zonnepanelen</b> laten zetten?</button>
  <button id="dakbekleden">Een <b>dak</b> laten <b> bekleden</b>?</button>
  <button id="asbest"><b>Asbest</b> laten <b> verwijderen</b>?</button>
</div>

Как я уже сказал, я хочу, чтобы кнопки были в ряду, но я понятия не имею, что я могу попробовать больше.

Спасибо взаранее!

Answer 1

Используйте для этого flexbox.Скорее всего, ваша проблема связана с использованием поплавков и неправильной ширины любого из элементов.

Я также убрал стиль рамки на ваших кнопках, поэтому все, что вам нужно сделать, это просто установить правильный цвет для ваших кнопок.

.btn-group {
  display: flex;
}

.btn-group button {
  padding: 10px 24px;
  min-width: 190px;
  max-width: 250px;
  font-size: 22px;
  color: white;
  flex-basis: 33%;
  border: none;
}


#zonnepanelen {
  background-color: #189538;
}

#dakbekleden {
  background-color: #ff990a;
}

#asbest {
  background-color: #0a5cff;
}

<div class="btn-group">
  <button id="zonnepanelen"><b>Zonnepanelen</b> laten zetten?</button>
  <button id="dakbekleden">Een <b>dak</b> laten <b> bekleden</b>?</button>
  <button id="asbest"><b>Asbest</b> laten <b> verwijderen</b>?</button>
</div>