Site Checklist Prototype

This is a prototype CSS page working on code for the checklists and todo lists on my site. There's no positioning styles on the page other than what's shown. 

<div class="example_box">
  <ul class="checkbox_list">
    <li>
      <div>
        <input type="checkbox" id="a1">
      </div>
      <label for="a1">
        <div>
          <p>
            Paint the sockets in the wall dull green.
            Pick a card and slip it under the pack.
            Pile the coal high in the shed corner.
          </p>
          <p>
            Lift the straw through the door of the stable.
            Pluck the bright rose without leaves.
          </p>
        </div>
       </label>
    </li>
    <li>
      <div>
        <input type="checkbox" id="a2">
      </div>
      <label for="a2">
        <div>
          <p>
            Glue the sheet to the dark blue background.
            Go now and come here later.
            Greet the new guests and leave quickly.
          </p>
        </div>
      </label>
    </li>
  </ul>
</div>
.checkbox_list {
  padding: 0.7rem;
  margin-left: 0;
  outline: 1px solid blue;
  > li {
    display: grid;
    grid-template-columns: 4ch 1fr;
    margin-bottom: 0.6rem;
    > label {
      > div {
        > p {
            margin-bottom: 0.5rem;
        }
      }
    }
  }
}

Page Reset Styles

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}


.example_box {
  margin: 1.6rem;
  width: min(100% - 4rem, 40ch);
  background-color: #211;
}