How to center the buttons and make them same size - html

Question

I am new to CSS and trying to make a page. I have 2 radio buttons but I am trying to make them appear like regular buttons using css.
They look pretty similar but I am unable to center them and they are not the same size. How can I fix this.
* {
box-sizing: border-box;
background-color: #bf2e1a;
}
header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
margin-left: 650px;
margin-right: 650px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
div#get-justice {
position: relative;
top: 30px;
padding-top: 10px;
background-color: #EFDFBC;
margin: 0 auto;
width: 600px;
height: 600px;
}
div#get-justice p {
background-color: #EFDFBC;
color: red;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: red;
border: none;
color: white;
margin-top: 120px;
padding: 20px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
cursor: pointer;
}
h3 {
background: #EFDFBC;
padding-top: 45px;
text-align: center;
color: red;
font-size: 23px;
}
/*div#first-question {
margin: 0px auto;
width: 650px;
height: 460px;
background: #EFDFBC;
}*/
ul {
columns: 2;
background: #EFDFBC;
}
li {
text-align: -webkit-match-parent;
background: #EFDFBC;
display: block;
padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-two-yes {
display: none;
margin: 11px;
}
input#quiz-question-two-no {
display: none;
margin: 11px;
}
label#twoYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-three-yes {
display: none;
margin: 11px;
}
input#quiz-question-three-no {
display: none;
margin: 11px;
}
label#threeYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-four-yes {
display: none;
margin: 11px;
}
input#quiz-question-four-no {
display: none;
margin: 11px;
}
label#fourYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-five-yes {
display: none;
margin: 11px;
}
input#quiz-question-five-no {
display: none;
margin: 11px;
}
label#fiveYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 369px;
background: #EFDFBC;
}
.questions {
margin: 0px auto;
width: 650px;
height: 654px;
background: #EFDFBC;
}
.questions-header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
padding-bottom: 30px;
padding-top: 30px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Questions</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "quiz-questions">
<div id="first-question" class="visible questions">
<h1 class = "questions-header"> Question 1 </h1>
<h3>Do you see number 1 to 5</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<hr>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
</div>
</body>
</html>

Answer 1

I would wrap the label and the input in a separate div. So it would be something like this:
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes, label#oneNo {
background-color: red;
text-align: center;
padding: 10px;
width: 80px;
display: block;
}
.button
{
display: inline-block;
}
<div class = "quiz-questions">
<div id="first-question" class="visible questions">
<div class="button">
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
</div>
<div class="button">
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
</div>
</div>
This would also remove all the awkward padding and margins.

Answer 2

* {
box-sizing: border-box;
background-color: #bf2e1a;
}
header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
margin-left: 650px;
margin-right: 650px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
div#get-justice {
position: relative;
top: 30px;
padding-top: 10px;
background-color: #EFDFBC;
margin: 0 auto;
width: 600px;
height: 600px;
}
div#get-justice p {
background-color: #EFDFBC;
color: red;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: red;
border: none;
color: white;
margin-top: 120px;
padding: 20px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
cursor: pointer;
}
h3 {
background: #EFDFBC;
padding-top: 45px;
text-align: center;
color: red;
font-size: 23px;
}
div#first-question {
text-align: center;
}
ul {
columns: 2;
background: #EFDFBC;
}
li {
text-align: -webkit-match-parent;
background: #EFDFBC;
display: block;
padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inline-block;
margin: 10px;
padding: 10px 30px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-two-yes {
display: none;
margin: 11px;
}
input#quiz-question-two-no {
display: none;
margin: 11px;
}
label#twoYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-three-yes {
display: none;
margin: 11px;
}
input#quiz-question-three-no {
display: none;
margin: 11px;
}
label#threeYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-four-yes {
display: none;
margin: 11px;
}
input#quiz-question-four-no {
display: none;
margin: 11px;
}
label#fourYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-five-yes {
display: none;
margin: 11px;
}
input#quiz-question-five-no {
display: none;
margin: 11px;
}
label#fiveYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 369px;
background: #EFDFBC;
}
.questions {
margin: 0px auto;
width: 650px;
height: 654px;
background: #EFDFBC;
}
.questions-header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
padding-bottom: 30px;
padding-top: 30px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Questions</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "quiz-questions">
<div id="first-question" class="visible questions">
<h1 class = "questions-header"> Question 1 </h1>
<h3>Do you see number 1 to 5</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<hr>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
</div>
</body>
</html>

Answer 3

there are a few options for center:
one of the most easiest thing: you can use the html center tag:
<center> <input type="radio" id="quiz-question-one-no" value="no" /> </center>
you can use:
.input{
margin-left:50%;
margin-right:50%
}
There are maybe more options, but this are the easiest options.
for the same size, you need to set the min-width, min-height at same by the 2 buttons. Then the buttons will have the same minium size. For the text yes and no I think it will be work.