How to change the dimensions of the elements relative to their containers

HTML-CSS
1

Hi.

This is currently how my survey form page looks like. I got everything I needed. Now I have to fix the UI.

survey-form
survey-form1278×876 20.5 KB

Per the suggestion of other users, I decided to give all my divs thin black borders. As you can see from my weird red arrow (customary “I’m not an artist” comment), I’m trying to stretch my elements (Button, Text Area, Drop down list, etc) to have the same length as its container, which is labeled as form-elements in my CSS.

This is my HTML:

<!DOCTYPE html>
<html>

<link href="survey.css" rel="stylesheet" type="text/css"/>

<body>

    <!--Header and paragraph div-->
    <div class="page-border">
        <h1 class="center-position">Survey Form</h1>

        <p class="center-position">Please fill out the short survey</p>

        <!--Form body div-->
        <div class="page-border form-belly">
            <!--Form elements div-->
            <div class="form-elements page-border">
                <form>
                    <!--Text input fields-->
                    <div class="page-border">
                        First name:<br>
                        <input type="text" name="firstname"><br>
            
                        Last name:<br>
                        <input type="text" name="lastname"></br>
                    
                        Age (optional):<br>
                        <input type="number" name="age"></br>
                    </div>

                    <!--Drop-down list-->
                    Which option best describes your role at the moment?:<br>
                    <div class="page-border">
                        <select name="Which option best describes your role at the moment?">
                            <option value="Option 1">Student</option>
                            <option value="Option 2">Full-Time Job</option>
                            <option value="Option 3">Full-Time Learner</option>
                            <option value="Option 4">Prefer not to say</option>
                            <option value="Option 5">Other</option>
                        </select></br>
                    </div>

                    <!--Radio buttons-->
                    Would you recommend this website to a friend?:<br>
                    <div id="radioGroup" class="page-border">
                        <label class="block"><input type="radio" name="radgroup" value="A">Definitely</label>
                        <label class="block"><input type="radio" name="radgroup" value="B">Maybe</label>
                        <label class="block"><input type="radio" name="radgroup" value="B">I don't think so</label>
                    </div></br>

                    <!--Drop-down list-->
                    What is your favorite thing about our website?:<br>
                    <div class="page-border">
                        <select name="What is your favorite thing about our website?">
                            <option value="Option 1">Interface</option>
                            <option value="Option 2">User Experience</option>
                            <option value="Option 3">Simplicity</option>
                            <option value="Option 4">Prefer not to say</option>
                            <option value="Option 5">Other</option>
                        </select></br>
                    </div>

                    <!--Checkboxes-->
                    What would you like to see improved? (check all that apply):<br>
                    <div id="checkGroup" class="page-border">
                        <label class="block"><input type="checkbox" name="chgroup" value="A">Accessibility</label>
                        <label class="block"><input type="checkbox" name="chgroup" value="B">Interface</label>
                        <label class="block"><input type="checkbox" name="chgroup" value="B">Features</label>
                        <label class="block"><input type="checkbox" name="chgroup" value="A">Support</label>
                        <label class="block"><input type="checkbox" name="chgroup" value="B">Pricing</label>
                    </div></br>

                    <!--TextArea-->
                    Any comments or suggestions?:<br>
                    <div class="page-border"><textarea name="message" placeholder="Enter your comment here..." rows="10" cols="30"></textarea></br></div>

                    <!--Submit button-->
                    <div class="page-border"><button type="button">Submit</button></div>
                </form>
            </div>
        </div>
    </div>

</body>
</html>

CSS:

.page-border {border: 1px solid black;}

.center-position {
    display: flex;
    justify-content: center;
}

.block {display: block;}

input {
    margin-top: 5px;
    margin-bottom: 10px;
}

select {
    margin-top: 5px;
    margin-bottom: 10px;
}

.form-belly {
    margin-right: 350px;
    margin-left: 350px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.form-elements {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 25px;
    margin-bottom: 25px;
}
2
  1. Give these elements a class, and set this class width: 100%;
  2. Once you have finished step 1, you’ll noticed the textarea is a little too wide, so set textarea {box-sizing : border-box;}
3

Besides, suggest you lower or remove the value of margin-right: 350px; margin-left: 350px; . I’ve test it in Codepen, and the margin 350px seems too big.

4

Created a class in CSS like element-dimensions {width: 100%;} and made the following changes to my div:

<div class="page-border">
                        First name:<br>
                        <input type="text" class="element-diemsions" name="firstname"><br>
            
                        Last name:<br>
                        <input type="text" class="element-diemsions" name="lastname"></br>
                    
                        Age (optional):<br>
                        <input type="number" class="element-diemsions" name="age"></br>
                    </div>

Doesn’t work