title: The background color in each todo-section does not cover the entire row when the checkbox is selected. The color doesn't reach behind the checkbox
body: <p>The background color in each todo-section does not cover the entire row when the checkbox is selected. The background color does not reach behind the checkbox. This is one of the todo-sections in my html from the form. It's one of 13 set up the exact same way. Please click the [enter image description here] link above for a visual of what I'm trying to convey.</p>
  <p>Below is the associated CSS. The issue that I'm having is that when the box is checked, the line strikes through the text like it's supposed to and the associated color appears in the background as well. However, the color isn't reaching behind the checkbox. Screenshot provided above in link.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.todo-section [type=checkbox]:checked+label {
    text-decoration: line-through;
    background-color: #D7B99E;
  }
  
  .todo-section {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;div class="todo-section"&gt;
      &lt;input type="checkbox" id="todo1" name="todo1" value="ID"&gt;&lt;label for="todo1" class="checked"&gt; Please bring picture ID and insurance card on the day of your 
      procedure.&lt;/label&gt; &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>