'Webpage shows uneven margin on the right after adding CSS in div

I have a webpage which works finely as expected until I add a grey background div with the following code:

.grey-div{
  padding: 200px;
  border: 1px solid #b1b1ae;
  text-align: center;
  background-color: #b1b1ae;
  opacity: 0.6;
}

This element when added creates a uneven margin as shown in this image, , When I remove the code, everything gets fixed. Also this only happens on phone, and there is no horizontal scrollbar even if the grey div creates extra space in the right side, what is this called?

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions