If I understand correctly, your problem is because all the inputs without discriminating which are radio or checkbox you give a width to 100% of the container, so they are not aligned to the text.
Try the following code:
input[type="radio"],
input[type="checkbox"]{
width: initial;
}
This sets the initial width of the input by default.
An example according to your project would be:
body {
background-image: url(img/darkblue.jpg);
background-size: 100vw 100vh;
font-family: arial;
color: #fff;
background-attachment: fixed;
margin:0;
}
form {
width: 400px;
margin:auto;
padding: 10px 20px;
background: rgba(0,0,0,0.4);
box-sizing: border-box;
border-radius: 7px;
}
h1{
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
label{
color: black;
}
input, textarea{
width: 100%;
margin-bottom: 12px;
}
input[type="radio"],
input[type="checkbox"]{
width: initial;
}
<fieldset>
<legend>Sports practice? </legend>
<label>
<input type="radio" name="yes" value="yes">
Yes
</label>
<label>
<input type="radio" name="no" value="no">
No
</label>
<label>
<input type="radio" name="sometimes" value="sometimes">
Sometimes
</label>
</fieldset>
Among other things, the attribute name
should be the same in all radio buttons, so that they can work correctly, here is the same demo with this corrected:
body {
background-image: url(img/darkblue.jpg);
background-size: 100vw 100vh;
font-family: arial;
color: #fff;
background-attachment: fixed;
margin:0;
}
form {
width: 400px;
margin:auto;
padding: 10px 20px;
background: rgba(0,0,0,0.4);
box-sizing: border-box;
border-radius: 7px;
color: black;
}
h1{
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
legend{
color: black;
}
label{
color: black;
display: block; /*Obliga a cada opción a ocupar una linea al 100% estando uno sobre otro*/
}
input, textarea{
width: 100%;
margin-bottom: 12px;
}
input[type="radio"],
input[type="checkbox"]{
width: initial;
}
<fieldset>
<legend>Sports practice? </legend>
<label>
<input type="radio" name="option" value="yes">
Yes
</label>
<label>
<input type="radio" name="option" value="no">
No
</label>
<label>
<input type="radio" name="option" value="sometimes">
Sometimes
</label>
</fieldset>