I need assistance with creating a web page that contains a black box at the center, with 30px padding on both the left and right sides.
Currently, my code works perfectly on desktop browsers without horizontal scrolling. However, when viewed on mobile Safari, there is an unwanted horizontal scroll. How can I fix this issue?
I have already tried applying overflow: hidden to the body, outer div, and inner div, but it did not solve the problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>hello world</title>
</head>
<body style="margin:0;padding:0;">
<div style="padding:0 30px">
<div style="background-color:#000;height: 50px;">
</div>
</div>
</body>
</html>