I'm currently working on making my website responsive, but I'm encountering an issue. When the website width gets smaller, the background doesn't take up the full width as intended. I've tried various methods to address this problem, but none have worked so far. I want the background image to still stretch across the entire width after the site's width drops below 1595px.
Here is a snippet of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>
/* general styling */
...
@media (max-width: 1595px) {
.header, .pros, .legends {
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
}
}