Radio input type - why its in center?

HTML-CSS
1

Hi
I can’t find solution: Why my radio type inputs are in center of form?

form
form1002×619 39.1 KB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>formularz</title>
	
<style type="text/css">
	body{
    background-image: url(https://ocs-pl.oktawave.com/v1/AUTH_2887234e-384a-4873-8bc5-405211db13a2/autoblog/2019/01/Ford-Mondeo-6.jpg);
		background-color: grey;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background-blend-mode: luminosity;*/
    background-size: cover;		
	}
	
	#tytul{
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color: darkgrey;
    display: block;
    margin-bottom: 30px;
    font-size: 1.5em;
    text-shadow: 1px 2px 0px #0E0E0E;
}
	
	#formularz{
		display: block;
		min-width: 300px;
		width: 50%;
		background: grey;
		padding: 20px;
		color: antiquewhite;
		margin-left: auto;
		margin-right: auto;
		border-radius: 10px;
		box-shadow: 0px 0px 50px 5px black;
	}
	input{
		position: relative;
		min-width: 200px;
		width: 100%;
		height: 30px;
		font-size: 100%;
		color: #B04C4E;
	}
	
	#gender{
		width: 
	}
	
	@media (max-width: 600px){
		body{
			background-size: 100%;
		}
		#tytul{
			color: white;
		}
	}
</style>
</head>

<body>
<div id="tytul">
<h1 id="title">FORMULARZ</h1>
<p id="description">Wypełnij, proszę formularz zgłoszeniowy.</p>
</div>
	<section id="formularz">
		
	  <form id="survey-form" action="http://www.onet.pl">
		  <fieldset>
		  	<legend>* Gwiazdką oznaczone są pola obowiązkowe</legend>
			<label id="name-label" for="name">Imię: </label><br>
				<input type="text" placeholder="Podaj imię" name="name" required><br><br>
			<label id="email-label" for="mail">e-mail: </label><br>
				<input type="email" placeholder="adres mailowy" name="mail" required><br><br>
			<label id="number-label" for="wiek">wiek:</label><br>
				<input type="number" min="18" max="75" placeholder="Wiek" name="wiek" required><br><br>
			<label id="model-label" for="model">Wybierz model:</label><br>
				<select id="dropdown" placeholder="model" name="model">
					<option value="Mondeo">Mondeo</option>
					<option value="Focus">Focus</option>
					<option value="SMax">SMax</option>
					<option value="Mustang">Mustang</option>
				</select>
			  
			  <br><br>
		</fieldset>
		  <fieldset>
			  <legend>Płeć</legend>
			  	<div id="gender">
					
			  	<input type="radio" id="male" name="gender" value="male">
  				<label for="male">Male</label>
  				<input type="radio" id="female" name="gender" value="female">
  				<label for="female">Female</label>
  				<input type="radio" id="other" name="gender" value="other">
  				<label for="other">Other</label>
			  </div>
					  
		  </fieldset>
		  <br><br>
			<button type="submit">Wyślij</button>
		 
	
	  </form>
	</section>
	
	
</body>
</html>
2

You are setting a width of 100% on the radio button inputs. That means that they will take up the entire width of the element they are in which puts them on a line by themselves.

3

Thank You, that was it.