CSS: how to align radiobutton to legend?

Question

I have a form, but my legends are not aligned to the radiobuttons. How can I do that?

I need to align the legen tag with the radio buttons. Like this example:

What I have:

I've aligned the radiobuttons but no the legend to them.I need the first letter of each legend aligned with the radio buttons. Like in the image example.

CSS: (to align radiobuttons):

ul, li {
    list-style-type: none;
}


ul.form-items li {
  display: flex; !important;
  justify-content: space-between; !important;
  width: 200px; !important;
  text-align: left; !important;
}

HTML:

    <form action="/post_url_tamanioscantidades/" method="post">
  <input type="hidden" name="csrfmiddlewaretoken" value="Phabzw1RqbPnGf2wKo4zoHqWLXogOcfbFR38uxXLeoHeBigRBXhXqO0q9mhFimsB">

<div id="tamanios">
   <legend> Selecciona un tamaño</legend>
      <ul>
        <li>
           <span>
              <input type="radio" name="tamanios" value="2x2" id="id_tamanios_0" required>
                                                    2&quot; x 2&quot; </span>
        </li>
        <li>
          <span>
            <input type="radio" name="tamanios" value="3x3" id="id_tamanios_1" required>
                                                    3&quot; x 3&quot;
         </span>
        </li>
         <li>
           <span>
             <input type="radio" name="tamanios" value="4x4" id="id_tamanios_2" required>
                                                    4&quot; x 4&quot;
           </span>
         </li>
         <li>
           <span>
             <input type="radio" name="tamanios" value="5x5" id="id_tamanios_3" required>
                                                    5&quot; x 5&quot;
           </span>
       </li>
   </ul>

 </div>


 <div id="cantidades">

    <legend> Selecciona la cantidad</legend>

         <ul>
             <li>
              <span>
                <input type="radio" name="cantidades" value="100" id="id_cantidades_0" required>
                                                50
               </span>                                                   <span>$69</span>
               <span class="savings">Ahorra 39%</span>
          </li>
          <li>
             <span>
                <input type="radio" name="cantidades" value="100" id="id_cantidades_1" required>
                                                100 </span>
                                                <span>$120</span>
<span class="savings">Ahorra 77%</span>
          </li>
          <li>
          <span>
            <input type="radio" name="cantidades" value="150" id="id_cantidades_2" required>
                                                    150
            </span>
                                                    <span>$509</span>
           <span class="savings">Ahorra 60%</span
         </li>
       </ul>

    </div>

  <input type="submit" value="Submit"/>
</form>

Answer 1

尝试将ul中的padding设置为0

ul { padding-left: 0; }