My labels and inputs are squished together, but not sure why?

Hey there, I tried to follow code from the previous lesson to work on this project but I can’t seem to get them to not be smooshed all together… is it a width issue? something else?

index.html file

<!DOCTYPE html>
<html lang="eng">
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
      <h1 id="title">Favorite Games Survey</h1>
      <p id="description">Fill out the survey below.</p>
      <form id="survey-form" action="">
          <label for="name">Enter Your Name: <input id="name" name="name" type="text" required /></label>
          <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
          <label for="age">Tell us your age: <input required id="age" type="number" min="13" max="100"/></label>

styles.css file

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #B9604D;
  color: white;
  font-family: Georgia;
  font-size: 16px;

h1, p {
  margin: 1em auto;
  text-align: center;

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
  display: block;

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px double white

image of preview

hi, can you clarify which lesson you mean “previous lesson” and what project you are working on? (is it a fcc one?)

the fields in the form are smushed together because the form is not applying a specific layout other than margin: 0 auto which centers the form and the fields inside it.

You can use a flex layout if you want to lay things out vertically.
or you can use a grid layout.
or you can define display: block for your labels which would force them to take over the whole row they are on and not share with any other element.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.