Как заставить ширину кнопки работать в медиа-запросе

Question

У меня есть 6 кнопок в моем коде, и я хочу, чтобы их ширина была одинаковой, и работала только первая кнопка.Я попытался использовать width:auto important; и не могу переопределить оставшиеся 5 кнопок.Пожалуйста, помогите мне.Спасибо.

#subpage .btn {
  float: left;
  margin: 1% 1%;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
  background: #222;
}

#subpage .btn a {
  display: block;
  padding: 15px;
  color: #FFF;
  text-decoration: none;
}

#subpage .b1 {
  width: 60%;
  clear: both;
  float: none;
  margin: 0 auto;
}

#subpage .b2 {
  width: 45%;
}

#subpage .b3 {
  width: 28.3%;
}

@media screen and (max-width: 700px) {
  #subpage .btn {
    float: none;
    margin: 1% 7% !important;
    padding: 0 !important;
  }
  #subpage .b1,
  #subpage .b2,
  #subpage .b3 {
    width: auto !important;
  }
}

<div class="btn b1"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b2"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b2"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b3"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b3"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b3"><a href="../sample.html">サンプルボタン</a></div>

Ожидаемый результат

Шахта

Answer 1

Я нашел решение в моей проблеме.Я положил width:auto !important; в .btn. И добавил clear:both; float:none; margin:0 auto; в .b2, .b3 и вместо width:auto !important; изменил его размер до width:86% !important;

#subpage .btn{
    float: none;
    margin: 2px 7% !important;
    padding: 0 !important;
    width: auto !important;
}

#subpage .b2,
#subpage .b3{
   clear: both;
   float: none;
   margin: 0 auto;
   width: 86% !important;
}