Label Nesting Issue

Tell us what’s happening:
I can’t proceed to the next lesson because my radio buttons are not nested in labels. To me they seem to be nested properly and I don’t see any issues?

Your code so far

<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
  <li>cat nip</li>
  <li>laser pointers</li>
<p>Top 3 things cats hate:</p>
  <li>flea treatment</li>
  <li>other cats</li>
<form action="">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
    <label for="indoor">
    <button type="indoor">Indoor</button>
    <input id="indoor" type="radio" name="indoor-outdoor">
    <label for="outdoor">
    <button type="outdoor">Outdoor</button>
    <input id="outdoor" type="radio" name="indoor-outdoor">

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

First of all, you can always go to the next lesson by backing out and selecting the next lesson from the list.

Secondly, you can’t pass this because you didn’t follow instruction. The model you were given is this:

  <input type="radio" name="indoor-outdoor">Indoor 

You did this:

    <label for="indoor">
    <button type="indoor">Indoor</button>
    <input id="indoor" type="radio" name="indoor-outdoor">

When adjust your code to fit the model, it passes.

Your radio buttons (which are the input elements with type “radio”) are in fact nested inside your labels. The reason the test doesn’t pass is because you also seem to have “button” elements inside each label as well. Buttons are not the same as radio buttons. Only input elements are needed