Please help me with my CSS or HTML code, I’m not sure which one is an issue, my HTML code passed the test, but my radio buttons and checkbox buttons are not aligned with text.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Traveling Survey Form</title>
</head>
<body>
<h1 id="title">
Traveling Survey Form
</h1>
<p id="description">
Please complete this survey about your traveling habits
</p>
<form id="survey-form">
<fieldset>
<legend>
Personal Information
</legend>
<label for="name" id="name-label">
Name (Required)
<input type="text" id="name" placeholder="Enter your name" required>
</label>
<label for="email" id="email-label">
Email (Required)
<input type="email" id="email" placeholder="enter your email" required>
</label>
<label for="age" id="number-label">
Age
<input type="number" id="number" min="16" max="100" placeholder="Enter your age">
</label>
<label for="location" id="current-location">
Your current location
<select id="dropdown" name="location">
<option value="locatio">Select one</option>
<option value="locatio">United States</option>
<option value="locatio">Europe</option>
<option value="locatio">Middle East</option>
<option value="locatio">Asia</option>
<option value="locatio">Africa</option>
<option value="locatio">India</option>
</select>
</label>
</fieldset>
<fieldset>
<label for="travel" id="travel">
Do you like to travel?
</label>
<input type="radio" name="travel" value="yes" checked> Yes
<input type="radio" name="travel" value="no"> No
<input type="radio" name="travel" value="not-sure"> Not sure
</fieldset>
<fieldset>
<label for="destination" id="destination">What is your favourite destination?</label>
<select id="dropdown">
<option value="destination">Select one</option>
<option value="destination">United States</option>
<option value="destination">Europe</option>
<option value="destination">Middle East</option>
<option value="destination">Asia</option>
<option value="destination">Africa</option>
<option value="destination">India</option>
<option value="destination">I don't have one</option>
</select>
</fieldset>
<fieldset>
<label for="preferrence" id="preferrence">
What is your preferred way to travel?
</label>
<input type="checkbox" name="preferrence" value="airplane"> By Airplane
<input type="checkbox" name="preferrence" value="train"> By Train
<input type="checkbox" name="preferrence" value="bus"> By Bus
<input type="checkbox" name="preferrence" value="car"> By Car
<input type="checkbox" name="preferrence" value="bicycle">By Bicycle
<input type="checkbox" name="preferrence" value="feet"> By Feet
</fieldset>
<fieldset>
<legend>
Travel Experience
</legend>
<label>Please tell us about your travel experience</label>
<textarea name="experience" id="comment-experience" rows="5" cols="50" ></textarea>
</fieldset>
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>
All your label elements are set to display: block making them take up the full width. As such, nothing can sit next to them.
All your input elements have width: 100%. As such, nothing can sit next to them.
Target the elements that need those styles. Do not apply them to all the same element types. You can scope your styles to specific child elements using a class on their containers. Or apply the styles using classes you add to the specific elements.
