CSS：最大宽度不在最大宽度上

Question

I have simple css animation and I use max-width to make horizontal scroll bar to not scroll.

Element need be visible only this what is in 1200px not more not less.

I tried following max-width but not working.

 section { max-width: 1200px; } .box { width: 100%; max-width: 540px; position: relative; z-index: -1; top: 0px; transform: rotate(80deg); left: 1500px; } .wave { position: absolute; opacity: .4; width: 1500px; height: 1300px; margin-left: -150px; margin-top: -250px; border-radius: 43%; } @keyframes rotate { from { transform: rotate(0deg); } from { transform: rotate(360deg); } } .wave.-one { animation: rotate 9000ms infinite linear; opacity: .1; background: #6FC4FF; } .wave.-two { animation: rotate 5000ms infinite linear; opacity: .1; background: #319DE8; } .wave.-three { animation: rotate 9500ms infinite linear; background-color: #0087E5; } 

 <section> <div class='box'> <div class='wave -one'></div> <div class='wave -two'></div> <div class='wave -three'></div> </div> </section> 

Answer 1

I use max-width to make horizontal scroll bar to not scroll.

You need to use overflow-x property to hide the horizontal scroll

section {
  overflow-x: hidden;
  width:1200px;
}

Answer 2

A simple way to solve this, if it causes no side effects to you, is to add overflow: hidden to body :

body {
  overflow: hidden;
}