I have created this simple div which has a form. For some reason its width is greater than 100% of screen even when I've assigned width of 100%.
I've checked for extra margin – I know I'm doing something wrong!
Any ideas?
/* NEWSLETTER SECTION */
.newsletter-wrap {
background-color: black;
color: white;
padding: 2rem 0.5rem 0.5rem 0.5rem;
width: 100%;
text-align: center;
}
.newsletter-wrap h4,
.newsletter-wrap label {
font-weight: bolder;
padding-bottom: 1rem;
font-size: 1.3rem;
}
.newsletter-form input {
padding: 0.5rem;
}
#submit-btn-newsletter {
text-align: center;
}
#submit-btn-newsletter input {
background-color: #d02121;
color: white;
}<div class="newsletter-wrap">
<div class="newsletter-headline">
<h4><b> JOIN OUR NEWSLETTER </b></h4>
</div>
<div class="newsletter-form">
<form>
<fieldset>
<label> NAME: </label>
<input type="text">
</fieldset>
<fieldset>
<label>EMAIL: </label>
<input type="text">
</fieldset>
<fieldset id="submit-btn-newsletter">
<input type="submit" value="Subscribe">
</fieldset>
</form>
</div>
</div>