cant figure out why the dropdown menu won't line up with the above text input boxes

Question

I cant figure out why the Favorite Food dropdown menu won't line up with the text input boxes above it.

I have tried moving around alot of the opening and closing tags to see if that would help but got nowhere. Tried adding some break tags, nothing. I also tried using the grid and display property with different values. I also tried using css grids and that didn't work at all.

 #survey-form{ background-color:gray; border-radius:10px; z-index:2; position:relative; /*top:-700px;*/ padding-top:30px; padding-bottom:100px; width:60%; margin:0px auto; opacity:70%; text-align:center; }.labels{ display: inline-block; text-align: right; vertical-align:top; width: 40%; padding: 5px; font-family:Helvetica; color:white; /*background:white;*/ float:left; }.input { width: 280px; height: 29px; border-radius: 2px; border: 5px; border-color: grey; }.right{ display:inline-grid; text-align: left; width: 18%; margin:0px auto; /* background:yellow;*/ }

 <div class="survey"> <form id="survey-form"> <label for="name" id="name-label" class="labels"> Name: </label> <div class="right"> <input id="name" class="input" type="text" placeholder="Name" required> </div><br> <label for="email" id="email-label" class="labels"> Email: </label> <div class="right"> <input id="email" class="input" type="email" placeholder="Email" required> </div><br> <label for="number" id="number-label" class="labels"> Age: </label> <div class="right"> <input id="number" class="input" type="number" placeholder="Enter Age" min="1" max="120" required> </div><br> <:--problem starts here--> <label for="food" class="labels"> Favorite Food:</label> <div class:"right"> <select id="dropdown" name="food" class="input"><br> <option value="select"> Select an option </option> <option value="pizza"> Pizza </option> <option value="biryani"> Biryani </option> <option value="fried-rice"> Fried Rice </option> </select> </div><br> <:--problem ends here--> <label class="labels" for="radio">Chicken or Steak;</label> <ul class="right" style="list-style: none?"> <li class="radio"> <input name="radio-buttons" value="1" type="radio"><label>Chicken</label> </input></li> <li class="radio"> <input name="radio-buttons" type="radio" value="2" ><label>Steak</label></input></li> </ul><br></br> <label for="sports" class="labels"> What sport(s) do you play</label> <ul id="sports" style="list-style. none" class="right"> <li class="checkbox"><label><input type="checkbox" id="hockey" value="1"> Hockey</label></input></li> <li class="checkbox"><label><input type="checkbox" id="badminton"value="2"> Badminton </label></input></li> <li class="checkbox"><label><input type="checkbox" id="badminton"value="3"> Basketball(#ballislife) </label></input></li> <li class="checkbox"><label><input type="checkbox" id="soccer"value="4"> Soccer </label></input></li> </ul><br> <label for="comment" class="labels"> Any Comments or Suggestions. </label> <textarea id="comment" name="comment" rows="4" cols="50" placeholder="Comments here..."></textarea> <br></br> <button id="submit" type="submit">Submit</button> </form> </div>

Answer 1

In the div which contains the dropdown, you have a syntax error <div class:"right"> . It should be <div class="right"> . Maybe this is causing the problem.