Will this work? Using flexboxes are a responsive yet centered solution. I've adjusted both the CSS for both the <fieldset> and the <div> inside it.
Full code I'd use:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1 {
text-align: center;
}
fieldset {
width: 85%;
margin: 5px auto;
border: 2px solid #b0b0b0;
border-radius: 15px;
}
fieldset#submit-reset {
display: flex;
justify-content: center;
align-items: center;
padding: 7px; /* adjust this to fit your needs */
border: 2px solid #b0b0b0;
border-radius: 15px;
}
label {
float: left;
width: 20%;
}
#personalDetailsSet{
background-color: #c4d7f5;
}
#personalDetails, #bookingDetails {
background-color: #f0f0ff;
}
#bookingDetailsSet {
background-color: #f5dfc4;
}
#password {
width: 55ch;
}
.form-set {
padding: 2px 0;
}
#single-room-div {
margin-top: 15px;
}
#submit-reset-div {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.radio-set {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h1>Hotel Reservation</h1>
<form>
<fieldset id="personalDetailsSet">
<legend id="personalDetails">Personal Details</legend>
<div class="form-set">
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" placeholder="Enter your first name">
</div>
<div class="form-set">
<label for="sname">Surname:</label>
<input type="text" id="sname" name="surname" placeholder="Enter your surname">
</div>
<div class="form-set">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
</div>
<div class="form-set">
<label for="password">Setup a password:</label>
<input type="password" id="password" name="password" placeholder="Min 8 characters, use at least 2 caps, no special characters">
</div>
</fieldset>
<fieldset id="bookingDetailsSet">
<legend id="bookingDetails">Booking Details</legend>
<div class="form-set">
<label for="checkin">Checkin day:</label>
<input type="date" id="checkin" name="checkInDay" value="2023-02-14">
</div>
<div class="form-set">
<label for="numOfDays">Number of days:</label>
<input type="number" id="numOfDays" name="numOfDays">
</div>
<div class="radio-set" id="single-room-div">
<label for="singleRoom">Single Room</label>
<input type="radio" name="roomType" id="singleRoom" value="SR">
</div>
<div class="radio-set">
<label for="doubleRoom">Double Room</label>
<input type="radio" name="roomType" id="doubleRoom" value="DR">
</div>
<div class="radio-set">
<label for="kingRoom">King Room</label>
<input type="radio" name="roomType" id="kingRoom" value="KR">
</div>
<div class="form-set">
<label for="breakfast">Breakfast:</label>
<select name="breakfast" id="breakfast">
<option value="include" selected>Include</option>
<option value="dontInclude">Don't Include</option>
</select>
</div>
<div class="form-set">
<label for="specialReqs">Special Requirements:</label>
<textarea name="specialRequirements" id="specialReqs" rows="5" cols="20">Please provide any special requirements</textarea>
</div>
</fieldset>
<fieldset id="submit-reset">
<div id="submit-reset-div">
<input type="reset" value="Reset">
<input type="submit" value="Send">
</div>
</fieldset>
</form>
</body>
</html>