CSS doesn't appear to be properly working - css

Question

the contact form i have on my front page that im making, has some CSS on it so its all centred, fits inside the white box it creates etc, yet one of the fields doesn't seem to fit inside the white box but everything else does, heres the site.
https://www.traveltradewinds.com/ttw/
When i change the CSS to try and fix it, i noticed that the width being set to 110% fits it in, but then isn't in the centre of the screen as a result, on a side note, the checkbox isn't the default input type checkbox it has a style to it that i haven't added, can anyone help me to show whats going wrong as it looks like ti should work to me?
Many thanks
Edit: forgot to add the CSS code, sorry:
#media only screen and (min-width: 40.063em) {
.hero .hero-inner {
width: 100% !important;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
}
.hero .hero-inner {
width: 100%;
float: left;
margin-left: 1.38889%;
margin-right: 1.38889%;
}
ul {
display: flex;
}
form {
border: 1px solid white;
background: white;
padding: 10px;
border-radius: 5px;
}
.widget ul {
list-style: none;
margin: 0;
padding: 0;
}
.hero .widget ul li, .hero .widget ol li {
list-style: none;
height: 48px;
margin: 50px 15px;
height: 48px;
margin: 50px 15px;
}
.hb-submit{
text-align:center;
}

Answer 1

Looks like it belongs to hotel-booking.css. Please check this

Answer 2

You didn't need to use the FORM tag for parent and LIST tag to children. You would use the DIV to create this part and then give 17% of main width to each subDIV.(1% to margin) such as below code:
body {
width: 100%;
text-align: center;
}
.mainDIV {
background: red;
width: 80%;
}
.subDIV {
background: blue;
height: 100px;
width: 17%;
margin: 1%;
display: inline-block;
}
<div class="mainDIV">
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
<div class="subDIV">
</div>
</div>
I hope it will be useful.