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.

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.

Lift the straw through the door of the stable. Pluck the bright rose without leaves.
Glue the sheet to the dark blue background. Go now and come here later. Greet the new guests and leave quickly.

CSS

.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

CSS

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

* {
  margin: 0;
}


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