Center Radio Buttons

[laurenjbest]

<p id="education-label">Level of Education</p>
    <label for="middle">
      <input type="radio" name="education-level" id="middle">Middle School
    </label>

I’m doing the survey challenge for HTML and CSS on CodePen. The code is nested in a form element as well. I’m trying to center my radio buttons with my other texts as well as reduce the spacing between the radio button and its label. I’ve looked everywhere and tried everything but I can’t seem to get it right.

This is what it looks like right now:

This is my CSS, and I deleted the stuff I used to try to center it.

body {background-color: #900000;}
h1 {color: white;
font-family: "Permanent Marker";
font-size: 75px;
text-align: center;
margin: 50px;}
#description {color: white;
font-family: "Cutive Mono";
text-align: center;
padding-top: 0px;
padding-bottom: 50px;
font-size: 15px;}
#survey-form {color: white; 
text-align: center;
font-family: "Cutive Mono";
font-weight: bold;}
input {text-align: center;
font-family: "Cutive Mono";
width: 500px;
height: 25px;
font-weight: bold;
font-size: 15px;}
select {width: 250px;
height: 25px;
font-family: "Cutive Mono";
font-weight: bold;}

Please help and thanks so much!

[kevcomedia]

Can you also share the CSS you used?

[laurenjbest]

I just added it! Probably nothing useful in it. I don’t know if it’s a CodePen thing or what. Thanks!

[Sujith3021]

If you don’t mind, can you provide the codepen link, because the problem may exist before the html code you have provided, so if you provide the link we could sort it out.

[laurenjbest]

Survey

[Sujith3021]

You have given a width and height to the <input>, that’s what affects the radio button, create a class for all the inputs except the radio and apply the width and height to that class

Apply the same class to all the inputs except the radio

[laurenjbest]

That worked! Thank you so much!