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

HTML-CSS
1

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">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
    <body>
      <h1 id="title">Favorite Games Survey</h1>
      <p id="description">Fill out the survey below.</p>
      <form id="survey-form" action="https://register-demo.freecodecamp.org">
        <fieldset>
          <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>
        </fieldset>

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

surveyproject
surveyproject747×466 9.85 KB

2

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

3

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.

4

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