Skip to main content
se añadieron 162 caracteres en el cuerpo
Origen Enlace
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>
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="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>
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>
Origen Enlace

Si entiendo bien, tu problema es porque a todos los inputs sin discriminar cuales son radio o checkbox le das un ancho al 100% del contenedor, por lo que no quedan alineados al texto.

Prueba el siguiente código:

input[type="radio"],
input[type="checkbox"]{
  width: initial;
}

Esto setea por defecto el ancho inicial del input.

Un ejemplo acorde a tu proyecto sería:

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>

Entre otras cosas, el atributo name debería ser el mismo en todos los radio buttons, para que puedan funcionar correctamente, he aquí el mismo demo con esto corregido:

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="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>