Why does this div overflow when width is 100%?

Question

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> 

Answer 1

padding created this problem.

.newsletter-wrap {
    padding: 2rem 0.5rem 0.5rem 0.5rem; 
                    ^--------------^----------------------here
    //more code...
 }

insert box-sizing:border-box; to .newsletter-wrap

.newsletter-wrap {
  box-sizing: border-box;
  //more code....
}

OR insert 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> 

Read more :

If you don't use of box-sizing: border-box; total width = padding + width + border ,but when use box-sizing: border-box; The width properties (and min/max properties) includes content, padding and border, but not the margin.

Answer 2

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> 

Answer 3

您可以在newsletter-wrap类中将宽度更改为max-width