I have two CodePens that are identical in HTML and CSS but they have a different output in the brows-CodePudding

I'm working on creating a survey form (CodePen A) but I couldn't get the form to display in the centre of the screen. To get focus on the problem I forked the code pen (CodePen B) and removed everything that was not pertinent to the problem. I then started to experiment with the CSS until I (finally) got the form to centre on the screen and was formatted the way I wanted it.

Then, through copy and pasting, I integrated my solution back into the survey form (CodePen A). To to my surprise the survey form did not at all look like what I had created in CodePen B. So I repeated the steps above to fork the survey form into yet another CodePen (CodePen C). I then tried to recreate my solution in CodePen C.

The HTML and CSS for both CodePen B and C looks identical but their output windows look very different. I have two questions:

What could have gone wrong?
How do I fix this?

The two CodePens in questions are:

CodePen B: https://codepen.io/ThomasDirkse/pen/vYZVZeg

<html lang="en">
    <div class="wrapper">
        <form class="survey-form">
            <div class="survey-questions">
                <label id="name-label" for="name">Name</label>
                <input id="name" type="text" class="input-fields" placeholder="My name" required/>
            </div>
        </form>
    </div>
</html>

*, *:before, *:after {
    box-sizing: border-box;
}

.survey-form {
    display: inline-block;
    width: 500px;
    border: 5px solid #235495;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    float: center;
    background-color: #A6C9E3;
    background-size: contain;
}

.input-fields {
    width: 100%;
    height: 40px;
    padding: 5px 0 5px 10px;
    color: #495057;
    background-color: #fff;
    border: 2px solid #235495;
    border-radius: 5px;
    text-align: left;
}

label { 
    color: #235495; 
    font-weight: bold; 
    display: block; 
    float: left; 
    padding: 5px 0 5px 0;
} 

.wrapper {
    text-align: center;
}

CodePen C: https://codepen.io/ThomasDirkse/pen/eYRPxZR

HTML and CSS for CodePen C is the same as above.

I would greatly appreciate any help you can provide! Many thanks in advance.

Thomas.

CodePudding user response：

You are using id instead of class for the value survey-form

<html lang="en">
    <div class="form-wrapper">
        <form class="survey-form">
            <div class="survey-questions">
                <label id="name-label" for="name">Name</label>
                <input id="name" type="text" class="input-fields" placeholder="My name" required/>
            </div>
        </form> 
    </div>
</html>

CodePudding user response：

It appears the main issue in "Codepen C" is that you are using ID instead of class. An ID is unique on a page and can only apply to a max of one element while a class selector can apply to multiple elements.

/* Codepen C */

.survey-form {
    display: inline-block;
    width: 500px; /* Changed to 500px instead of 50% to align with Codepen B (500px is not equivalent to 50%) */ 
    border: 5px solid #235495;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    float: center;
    background-color: #A6C9E3;
    background-size: contain;
}

<!--Codepen C-->
<html lang="en">
    <div class="form-wrapper">
        <form class="survey-form">
            <div class="survey-questions">
                <label id="name-label" for="name">Name</label>
                <input id="name" type="text" class="input-fields" placeholder="My name" required/>
            </div>
        </form> 
    </div>
</html>