Вкладки со 100% шириной?

Question

Я пытаюсь делать вкладки в CSS, но я застрял.Мои вкладки работают хорошо, но я хочу, чтобы меню было 100% шириной.Там он останавливается после «Tab4», как я могу это сделать?

В настоящее время я изучаю HTML и CSS, так что извините, если это глупый вопрос: o

Ниже это мойкод

body {
  background-color: #161719;
  color: #fff;
}

div.tab-frame>input {
  display: none;
}

div.tab-frame>label {
  background-color: rgba(1, 1, 1, 0.30);
  display: block;
  float: left;
  font-size: 30px;
  padding: 0 20px 7px 20px;
  cursor: pointer;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: 0.3s;
}

div.tab-frame>label:hover {
  color: rgba(255, 255, 255, .9);
}

div.tab-frame input:checked+label {
  /* background:rgba(255,255,255,.03);   */
  color: #ff4052;
  cursor: default;
}

div.tab-frame div.tab {
  display: none;
  padding-top: 10px;
  clear: left;
}

div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked~.tab:nth-of-type(4) {
  display: block;
}

div.tab-frame>label:nth-of-type(1) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

div.tab-frame>label:nth-of-type(4) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

<div class="tab-frame">
  <input type="radio" checked name="tab" id="tab1">
  <label for="tab1">Tab 1</label>
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">Tab 2</label>
  <input type="radio" name="tab" id="tab3">
  <label for="tab3">Tab 3</label>
  <input type="radio" name="tab" id="tab4">
  <label for="tab4">Tab 4</label>

  <div class="tab">content 1</div>
  <div class="tab">content 2</div>
  <div class="tab">content 3</div>
  <div class="tab">content 4</div>
</div>

Answer 1

Попробуйте это. Надеюсь, это поможет.

    *{
  box-sizing: border-box;
}

body {
  background-color: #161719;
  color: #fff;
}

div.tab-frame>input {
  display: none;
}

div.tab-frame>label {
  background-color: rgba(1, 1, 1, 0.30);
  display: block;
  float: left;
  font-size: 30px;
  padding: 0 20px 7px 20px;
  cursor: pointer;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .5);
  font-weight: 400;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: 0.3s;
  width: 25%;
  text-align:left;
}

div.tab-frame>label:hover {
  color: rgba(255, 255, 255, .9);
}

div.tab-frame input:checked+label {
  /* background:rgba(255,255,255,.03);   */
  color: #ff4052;
  cursor: default;
}

div.tab-frame div.tab {
  display: none;
  padding-top: 10px;
  clear: left;
}

div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3),
div.tab-frame input:nth-of-type(4):checked~.tab:nth-of-type(4) {
  display: block;
}

div.tab-frame>label:nth-of-type(1) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

div.tab-frame>label:nth-of-type(4) {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

    <div class="tab-frame">
      <input type="radio" checked name="tab" id="tab1">
      <label for="tab1">Tab 1</label>
      <input type="radio" name="tab" id="tab2">
      <label for="tab2">Tab 2</label>
      <input type="radio" name="tab" id="tab3">
      <label for="tab3">Tab 3</label>
      <input type="radio" name="tab" id="tab4">
      <label for="tab4">Tab 4</label>

      <div class="tab">content 1</div>
      <div class="tab">content 2</div>
      <div class="tab">content 3</div>
      <div class="tab">content 4</div>
    </div>

Answer 2

изменение css из div.tab-frame>label

div.tab-frame>label {
    background-color: rgba(1, 1, 1, 0.30);
    /* display: block; */
    /* float: left; */
    font-size: 30px;
    padding: 0 20px 7px 20px;
    cursor: pointer;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .5);
    font-weight: 400;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: 0.3s;
    display: inline-block; // Added
    width: 24.5%; // Added
    box-sizing: border-box; // Added
}