I created an example code snippet to see how exactly to create a page that makes the image centered and the background of the page extend evenly after 1920px, the code does what I just said but it does not extend evenly when using inspect element and testing it past 1920 px. The right seems to double the left when it extends outwards. Hope someone can help with this. Should be a simple fix, just cant seem to find it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body class="backgroundimgall">
<section class="classtest">
<div class="backgroundimg"></div>
</section>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.backgroundimgall {
background-color: black;
width: 100%;
height: 100rem;
position: static;
margin: 0 auto;
}
.classtest {
width: 100%;
margin: 0 auto 0 auto;
border: 0.1rem solid red;
height: 99rem;
}
.backgroundimg {
background-image: url(https://user-images.githubusercontent.com/82626961/124367741-7a051500-dc06-11eb-8ec7-e4b430658f00.jpg);
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background-repeat: no-repeat;
margin: 0 auto;
}
@media screen and (min-width: 1920px) {
.classtest {
max-width: 1920px;
}
}
