h1 { margin-bottom: 10px; } h2 { margin-bottom: 20px; } .button-read { color: #ddd; background: none; font-size: 30px; border: 5px solid #ddd; transition: 1s; } .button-read:hover { color: #fff; border: 5px solid #fff; transition: 1s; } .last-bublication { padding-top: 100px; padding-bottom: 100px; } 
 <div class="container last-publication"> <div class="raw"> <h1>Latest News</h1> <h2>Description to last publication</h2> <button class="button-read">Прочитать</button> </div> </div>

Horizontal scrolling appears when I add the padding-bottom property to the parent last-publication .
Why is this happening?
With padding-top everything is fine.
It also appears if the button margin-bottom: 100px;
How to fix it and why it appears?
Only without overflow-x crutch, please.

  • scrolling at the whole window appears, but not at a separate block - Kamil NHOT
  • if you remove 1 from email: button || h1 || h2, scrolling disappears ... - Kamil NHOT
  • And the parent to <div class = "container last-publication"> can be seen? Since when assigning these properties, the block must be lengthened - Oma
  • He is in the body. - Kamil NHOT
  • I noticed that the scrolling on the horizon begins when the content is higher than the window - Kamil NHOT

1 answer 1

Without a complete source when I can only advise:

 body { overflow: auto; overflow-x: hidden; }
  • Quote: "Only without a crutch overflow-x" - vp_arth
  • @vp_arth I can read. What sample code, such and the answer. - Vadizar
  • read the comments to the article, I explained the solution to the problem, it remains to find out the essence of this - Kamil NHOT