Essentially when the browser window goes larger thh div stays centered and creates white space on the outside. I want the same thing to happen when the browser window goes smaller. I want to see less of the div but keep it centered. At the moment I see less of the div but the left side locks so I end up only seeing a slither of the left part of the image (instead of the center). Sorry if this is a convoluted way of asking I am new to programming. Any help would be massively appreciated! Thanks in advance! :)

p.s I am also struggling to have the video playing if anyone can help with that too

Here is my code currently

```css
body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
}

#page-container {
  width: 1920px;
  margin: auto;
}
```

```html
<div id="page-container">
  <video id="backgroundvid" width="auto" autoplay>
    <source  src="assets/video/portalAnimLowRes.mp4" type="video/mp4">
  </video>
</div>
```
['https://Stackoverflow.com/questions/64066995', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/14341030/']
You can try

```
#page-container {
    width:1920px;
    margin-left: -960px;
    position: relative;
    left: 50%;
}        

```
You can put the pageContainer on `absolute` position as follows.

```
#page-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
}

```