Spacing between label and input

HTML-CSS
1

Hello,

I already passed the certification for the Survey form but since I want to build a strong portfolio I restarted it to write a more nice form and one that has something to do with my current job.

Since im a dive instructor and boat captain I wanted to make feedback form on the diving classes but I got stuck.

been looking and trying for 2 days now but I cant figure it out.

now the light blue box under h1 and p

I cant seem to figure out how to add some space between the label and the input so they are not all smashed together.

if I use display: flex; it gets even worse…

can someone point me in the right direction to get this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Diving Form</title>
    <link rel="stylesheet" href="styles.css">
  </head> 
  <body>
    <div class="container">
      <header class="header">
        <h1 id="title" class="text-center">Diving Certification Class Feedback</h1>
        <p id="discription" class="discription text-center">Thank your for completing you diving certification with us! We would love to hear your thoughts to help improve future classes. Please take a few minutes to provide your feedback.</p>
        </header>
        </div>
         <form id="survey-form">
          <div class="form-group">
            
            <label id="name-label" for="name">Full Name:</label>
            <input type="text" id="name" name="name class="form-control" placeholder="Enter Full Name Here.." required>
            <label id="email-label" for="email">Email:</label>
            <input type="email" id="email" name="email" class="form-control" placeholder="Enter your Email.." required>
            <label id="course-label" for="course">Course Taken:
              <select id="course" name="course" required>
                <option value="">(Select One)</option>
                <option value="DSD">Discover Scuba Diver</option>
                <option value="OWD">Open Water Diver</option>
                <option value="AOWD">Advanced Open Water Diver</option>
                <option value="Res">Rescue Diver</option>
                <option value="DM">Divemaster</option>
                <option value="Spec">Speciality Cours(es)</option>
                </select>
                <label id="special-label" for="special">Specify Speciality Course:</label>
                <input type="text" id="special" class="form-control" placeholder="Which Specialty Course..">
                  

              </div> 
   </div>
      </body>
      </html>

body {
  background-image: linear-gradient(
      115deg,
      rgba(20, 40, 80, 0.7),
      rgba(30, 60, 120, 0.2)
    ),
url(https://waterlust.com/cdn/shop/files/AdobeStock_311392344_2_1_600x.jpg?v=1649189742);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  }

h1{
  text-align: center;
  padding: auto;
  margin: 20 auto auto 0;
  color: #a1b6bf;
}

p {
  text-align: center;
  margin: 15 auto 0 auto;
  font-style: italic;
 color: #a1b6bf;
 max-width: 500;
}

.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}
.form-group {
  background-color: rgba(69, 170, 249, 0.2);
  width: 80%;
  max-width: 500px;
  min-width: 100px;
  margin: auto;
  padding-left: 100;
  padding-top: 20;
  padding-bottom: 20;
  @padding-right:  5;
  color: #a1b6bf;
  font-size: 25;
}

label {
  display: block;
}
  

select {
  display: block;
  width: 80%;
  min-height: 2.5em;
}
input {
  width: 80%;
  min-height: 2.5em;
  padding: 10;
}
1 Like
2

Hi there!

Please specify the element. Also provide link to your form from another code source.

1 Like
3

in form-group I made a lighter blue box? with the background color and opacity

and what do you mean with ‘Also provide link to your form from another code source.’ ??

im brand new to coding.

4

Provide link to your code, like codepen.io

5

That all numerical value did not work without px, vw, %, rem etc.
Edit: remove @ sign and also check for all other css selectors.

6

I have put the @ there to see what it did. and the it looked better without the any padding right so I left it.

I will add the code to the web site you provided. just give me sec

7

when I add the code to the website you provided it give a totally diiferent outcome than on the freecodecamp website.

on the freecodecamp website its all nicely centered and on the code pen its not.

8

You haven’t modified your css code as i suggested.

9

You need to add some values with margin top, bottom and left, right auto to input or label selector within the css to achieve the desire outcome.

2 Likes
10

Hey hasan,

thanks for helping.

I got It now. please excuse me I’m a total newbie.

cheers

2 Likes
11

Your welcome, No problem. Keep it up, happy coding.

1 Like