Why is this div overflow at 100% width?
I created this simple one div
that has form
. For some reason, its width exceeds 100% of the screen even when I assigned a width of 100%.
I checked the extra margin - I know I am 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>
source to share
padding
created this problem.
.newsletter-wrap {
padding: 2rem 0.5rem 0.5rem 0.5rem;
^--------------^----------------------here
//more code...
}
insert box-sizing:border-box;
into.newsletter-wrap
.newsletter-wrap {
box-sizing: border-box;
//more code....
}
OR paste this code:
* {
box-sizing: border-box;
}
.newsletter-wrap {
box-sizing: border-box;
}
.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>
More details:
Unless you are using box-sizing: border-box;
total width = padding + width + border, but when using the box-sizing: border-box;
width properties (and the min / max properties) include content, padding and border, but not margin.
source to share
Use box-sizing:border-box;
inside.newsletter-wrap
/* NEWSLETTER SECTION */
.newsletter-wrap {
background-color: black;
color: white;
padding: 2rem 0.5rem 0.5rem 0.5rem;
width: 100%;
text-align: center;
box-sizing:border-box;
}
.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>
source to share