CODEWITHSUNDEEP
htmlcssoverflow
billy
billy

Reputation: 1493

Why does this div overflow when width is 100%?

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>

Upvotes: 3

Views: 84

Answers (3)

Ehsan
Ehsan

Reputation: 12969

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.

Upvotes: 3

Rohit Verma
Rohit Verma

Reputation: 3783

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>

Upvotes: 1

Carlitos
Carlitos

Reputation: 419

You couldve just changed the width to max-width in newsletter-wrap class

Upvotes: -1

Related Questions