• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Beginner on margins with a problem

ramzez

Coder
Hi all,

I am new to HTML & CSS and started to do the freeCodeCamp course. On my challenge to create a form I get these text input fields that extend around my form. I can't figure out why. I expected it to look like the dropdown menu, but I don't know why there is a difference.

This is what the CSS part looks like (I used ugly colors to see clearly what my margin/padding did):

CSS:
form {
  background: yellow;
  padding: 2.5rem 1.5rem;
  border-radius: 0.25rem;
  text-align: left;
}

.container {
  width: 100%;
  margin: 3rem auto 0 auto;
  text-align: center;
}

.form-group {
  background-color: white;
  margin: 0 auto 1em auto;
  padding: 0.25rem;
}

.form-control {
  display: block;
  width: 100%;
  height: 2rem;
  padding: 0.4rem .6rem;
  background-color: black;
}

CSSproblem.png

Help is much appreciated!

~Ramzez
 
Solution
We need all of your CSS and HTML to get an idea of what is happening. I am going to say, try and remove the padding from the input and see if it sorts its self out?

ramzez

Coder
CSS without HTML is worthless. I can't tell in which div the form-control resides in.
Sorry, I am trying to not give a load of info and hoped this would be enough. 😅

HTML:
 <form id="survey-form" action="URL">
    <div class="form-group">
      <label id="name-label" for="name"> <p>Name</p> </label>
       <input type="text" id="name"
              placeholder="Enter your first and last name"
              class="form-control"
              required>
    </div>

The only other div parent is the one with class 'container'.

Is this enough info?
 
Last edited by a moderator:

simong1993

King Coder
Staff Team
Guardian
We need all of your CSS and HTML to get an idea of what is happening. I am going to say, try and remove the padding from the input and see if it sorts its self out?
 
Solution
Top