It is because the fieldset has default styles. Some elements have them. The headings, for example, have default margins. You can find out other default CSS values of HTML elements at W3Schools.
Another thing I noticed that you should avoid doing is that you’re targeting almost all of your HTML elements by their id. Id selectors have the highest specificity so any styles you have for them can overwrite the type and class selectors. What if you ran into a problem that your new added styles aren’t applying or taking into effect? The probable cause could be is that before (or even after) your new added styles, there’s an id selector that you’ve set some styles for it. I suggest reading about “calculating specificity” and “combining selectors” at Shay Howe’s free quality open resource.
I have another observation in your CSS code that could be improved. Below is your code for styling the labels, NAME, EMAIL, and PANTS and their input. Yes, they’ll work, and the styles will take into effect, but there’s a more efficient way to do it.
#name {
width: 400px;
}
#name-label {
margin-right: 350px;
}
#email {
width: 400px;
}
#email-label {
margin-right: 350px;
}
#number {
width: 400px;
}
#number-label {
margin-right: 350px;
}
You can combine the id selectors like this:
#name, #email, #number {
width: 400px;
}
#name-label, #email-label, #number-label {
margin-right: 350px;
}
But if you took my advice and read about specificity, you will not target them by their id. Instead, you’ll be using the type selectors.
Avoid making your CSS code long, you would have a hard time going around it. And practicing minimizing your code will make you efficient.
Based on your code above, I assume you set those width and margin values because you want the labels and input boxes to have their own line. You can use percentages instead of px to be responsive. Doing it can also save you from using math. So, what percent can you apply to the input boxes so that they’ll fully occupy the remaining space to their right side making the labels not sit next to them?
I suggest reading about absolute and relative lengths as well as max-width and max-height. The course after all is “Responsive Web Design”. The main goal is to learn how to make your page have a fluid or flexible design. A design that transforms from one screen along with different screen sizes, from mobile to huge desktop screens.
Your form has a horizontal scroll bar indicating its unresponsiveness. I advise you to also learn well about media queries. I talked about it in another discussion here in the forum.
For my last suggestion, going through the FCC’s new Responsive Web Design Beta Course will be a huge help. You’ll be building mini-projects as you go through each lesson so you can learn a lot much better about the new ways to layout pages like Grid and Flexbox. You can read more about the course here. Grid and Flexbox are so much better than using floats in customizing layouts as they’re really dedicated to that purpose. The use of float is mainly for wrapping text or inline elements around pictures. Studying it is still helpful tho. I learned some others saying that one-way learning float comes in handy is in the case of going into old projects and updating them to conform to the new ways of customizing layout.