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/']
Do you really want the horizontal scroll bar?

If you don't, I prefer not to define the width(especially in pixel), as the width of every device varies.

Instead, you can define width as `width:100%` or `width:100vw`, this helps to fit the div according to the screen size.

You can try this code:

```
body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0 auto;
  padding: 0;
}
#page-container {
  width: 100%;
  margin: auto;
}

```
What about use flexbox?

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

#page-container {
  width: 1920px;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

```html
<div id="page-container">
  <img src="https://placeimg.com/640/480/any">
</div>
```