Выберите причину возникновения проблем с сеткой CSS

Question

Я пытаюсь настроить решение Flex / CSS Grid для своих форм, но, по крайней мере, один из используемых мной элементов управления, я сузил его до выбора, заставляет все элементы управления в их CSS Grid переполнить границы области гибкого дисплея.

Некоторая другая информация:

Платформа: Wordpress

Тема: Юпитер

Плагин вкладок: WP Tabs Отзывчивые горизонтальные вертикальные и аккордеонные вкладки

Вот код и способ его рендеринга:

.GridDiv {
  display:grid;
  grid-template-columns: max-content max-content;
  grid-gap:5px;
  text-align: right;
}

<label id="errMsg" style="color: red; font-size:14px; font-weight:bold;"></label><br />
<label for="NewUsrFrm">New User Form:</label>
<form id="NewUsrFrm" method="post" action="/grant/php/addUser.php">
  <fieldset>
    <div style="display: flex;">
      <div style="width: 280px;">
        <div style="float: left;">
          <legend>User Information</legend>
          <div class="GridDiv">
            <label for="UsrFName">First Name:</label> <input type="text" name="UsrFName" width="120" />

            <label for="UsrLName">Last Name:</label> <input type="text" name="UsrLName" width="120" />

            <label for="UsrAge">Age:</label> <input type="number" min="1" name="UsrAge" value="1" width="120" />
          </div>
        </div>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div style="display: flex;">
      <div style="width: 280px;">
        <div style="float: left;">
          <legend>Login Information</legend>

          <div class="GridDiv">
            <label for="UsrName">Username:</label> <input type="text" name="UsrName" width="120" />

            <label for="UsrPass">Password:</label> <input type="password" name="UsrPass" width="120" />

            <label for="UsrGrp">Group:</label> <input type="number" name="UsrGrp" width="120" />

            <label for="UsrType">Type:</label>
            <select name="UsrType" width="100">
              <option value="0">Student</option>
              <option value="1">Parent</option>
              <option value="2">Administrator</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <br />

  <button type="submit" id="frmBtnSub">Create User</button>
</form>

Примечание: вам, вероятно, понадобится сайт WordPress, и вам нужно будет установить плагин, упомянутый выше, чтобы протестировать код, который я разместил.

---

Обновление:

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

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

Даже если я использую! Важный, выбор не использует атрибут ширины css, который я пытаюсь присвоить ему. Что происходит, когда у вас есть два! Важных атрибута CSS, но один имеет более высокую специфичность?