Hey everyone! I need some help with my website code:
<html>
<head>
<!-- extra code here -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="screenFourth">
<div class="container">
<!-- many tags -->
</div>
</div>
</body>
</html>
The issue I'm facing is that when I view the website on a mobile device, there is an empty space on the right side of the screen. Check out this image for reference: Empty space on the right side
My CSS code looks like this:
.screenFourth{
background-image: url(...);
background-size: cover;
background-position: top;
min-height: 1380px;
}
@media screen and (max-width: 760px){
.container{ width: 100%; margin: 0 auto; }
}
Any suggestions on how to fix this problem? Thank you!