My Checkbox and Radio boxes do not align with the associated text - html

Question

I am currently creating a bit of a fun project. For some reason, my text and check / radio boxes do not align with the text. They seem to be off to one side and higher than the text.
Here is my pen - https://codepen.io/Amnesia180/pen/RwKQOKP
html,
body {
line-height: 1.5;
height: 100%;
margin: 0 auto;
font-family: 'Quicksand', sans-serif;
color: #070707;
}
header {
position: relative;
top: 0;
padding: 0;
background-color: #EFEFEF;
width: 100%;
height: 60px;
}
.material-icons {
color: #505050;
}
#nav-bar {
position: relative;
display: flex;
justify-content: space-between;
padding: 10px;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
li {
padding: 0px 20px;
}
.nav-link-left {
float: left;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link {
float: right;
text-decoration: none;
color: #070707;
font-weight: 800;
}
.nav-link:hover {
float: right;
color: #5873D9;
border-bottom: 3px solid #5873D9;
padding-bottom: 5px;
}
#intro {
display: flex;
flex-direction: column;
align-items: center;
height: 470px;
margin-top: 50px;
max-width: 90em;
}
h1 {
font-size: 4em;
color: #34D1BF;
}
h2 {
color: #5873D9;
margin-top: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
font-size: 1.5em;
padding: 10px 0;
}
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
#submit {
background-color: #34D1BF;
width: 40%;
height: 40px;
margin-top: 15px;
margin-left: 30%;
margin-right: 30%;
border: 2px solid #34D1BF;
color: white;
}
#about,
#promo-image,
#burger {
max-width: 50em;
width: 90vw;
margin: 0 auto;
padding: 5px;
text-align: left;
}
#promoimage {
display: block;
margin: 0 auto;
max-width: 518px;
width: 100%;
}
#burgers {
margin-top: 40px;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-around;
}
.box {
border: 2px solid #EFEFEF;
border-radius: 5px;
margin: 2px;
text-align: center;
}
.price {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.price li {
padding: 30px;
border: 0.5px solid #EFEFEF;
}
.card-header {
background-color: rgba(52, 209, 191, 1);
color: white;
}
footer {
width: 100%;
background-color: #EFEFEF;
height: 80px;
text-align: center;
}
footer p {
padding-top: 20px;
}
.burgerform {
text-align: left;
display: inline;
}
.burgerform label {
font-size: 1.5em;
font-weight: bold;
}
.burgerform legend {
font-weight: bold;
}
#media (min-width: 600px) {
#intro {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
#burgers {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
justify-content: space-between;
}
}
<label>Sauces</label>
<p/> Burger Sauce <input type="checkbox" id="burgersauce" name="burgersauce" onclick="calculateTotal()"> Dirty Mayo Sauce
Can anyone advise?
Thanks!

Answer 1

Your inputs have width: 100%; which means it'll occupy entire width. And the "label" is just plain text so they are just flowing into the next line.
If you want to align them then you need proper elements (label>) aligned within 100% of the same line.

Answer 2

That is because you have given your inputs a width of 100%, so now each checkbox and radiobutton spans the whole width of the screen.
input {
width: 100%;
height: 30px;
border: 2px solid #34D1BF;
padding: 5px;
}
You can debug CSS issues using the CSS developer tools of your browser, as in the attached screenshot

Answer 3

Wrap both label (eg. Burger Mayo Sauce) and checkbox within a Flex-box, apply 100% width to it, and justify-content:space-between.
.menu-item{
witdh: 100%;
display:flex;
justify-content:space-between;
}
input[type=checkbox]{
//Whatever styling you want to apply to the checkbox.
}
Do not add the 100% width to the input, flexbox will manage the space for you.