Newbie coder here working on a project that's making me insane. I have tried everything I can think of. I know it has to do with the width but I can not figure it out so that all the content aligns. I am looking to align the label with the checkbox input within the fieldset and have it centered. I tried removing the 100% width, using flex display, changing the display to inline-block, and other various things but with no success- Any help would be GREATLY appreciated!
<div class="container">
<h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
<p>Please fill out the form below to contact us</p>
<form action="process.php">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="state-select">Choose Your State:</label>
<select name="state" id="state-select">
<option value="">Required</option>
<option value="ct">Connecticut</option>
<option value="ny">New York</option>
<option value="ma">Massachusets</option>
<option value="nh">New Hampshire</option>
<option value="me">Maine</option>
</select>
</div>
</form>
<fieldset>
<legend>Newsletter</legend>
<div>
<input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<button type="submit" class="btn">Submit</button>
</div>
</section>
</div>
CSS
#contact-form .form-group {
margin-bottom: 20px;
}
#contact-form {
display: block;
margin-bottom: 5px;
}
#contact-form input,
#contact-form textarea {
width: 100%;
padding: 10px;
border: 1px #ddd solid;
}
#contact-form textarea {
height: 200px;
}
#contact-form input:focus,
#contact-form textarea:focus {
outline: none;
border-color: #12cad6;
}```