Why Doesn't My Header Div Stay Centered When I Scroll The Image?

I am trying to center my header div. It works most of the time. However, once I make the screen window width smaller than the image and scroll the the right side of the image, the header div begins to veer off to the left. I cannot seem to fix this problem.

This is the code that I currently have and I have tried everything I could think of to center it when I scroll the image, but I just cannot.

To see what my problem is, go into full screen snippet mode and then make your window small enough, so that you have to scroll to see the rest of the image. And once you scroll enough the to the right, the header moves to the left.

I would like to keep the image to be the same width and height.

.text{
    text-align:center;
}


#header {
    position: sticky;
    left: 50%;
    width: 200px;
    height: 160px;
    transform: translateX(-50%);
}


#div{
    position: relative;
    margin: auto;
    height: 675px;
    width: 1350px;
    border: 5px solid black;
    background:gray;
}


#image{
    position:relative;
    height:675px;
    width:1350px;
}

<div id="header">
    <h1 class="text">Title</h1>
    <h3 class="text">SubTitle</h3>
    <h2 class="text">SubTitle</h2>
</div>

<div id="div">
    <img id="image" src="https://media.istockphoto.com/id/1411569800/photo/fluttering-blank-white-flag-on-flagpole-isolated-on-black-background.jpg?s=612x612&w=0&k=20&c=Nn74uzTU1_VWvGBdgr0Fk6Ahmqfj5ZX51WHjF1Vodts=">
</div>

Solution

The body tag renders as a block by default (HTML spec) so it's establishing a width based on its container (the window) and the grey div is overflowing out of it. Your sticky header is behaving normally within the body tag's width.

I guess you could set the body to display:inline-block to force it to expand to contain the grey div, but I personally get nervous about mucking around with the body tags for how it might effect the layout of other elements on the page. Would it be possible for you to wrap your content in a container? If so, this is what I'd do:

.text {
    text-align: center;
}

#container {
    display: inline-block;
}

#header {
    position: sticky;
    left: 50%;
    width: 200px;
    height: 160px;
    transform: translateX(-50%);
}

#div {
    position: relative;
    margin: auto;
    height: 675px;
    width: 1350px;
    border: 5px solid black;
    background: gray;
}

#image {
    position: relative;
    height: 675px;
    width: 1350px;
}

<div id="container">
    <div id="header">
        <h1 class="text">Title</h1>
        <h3 class="text">SubTitle</h3>
        <h2 class="text">SubTitle</h2>
    </div>
    <div id="div">
        <img id="image" src="https://media.istockphoto.com/id/1411569800/photo/fluttering-blank-white-flag-on-flagpole-isolated-on-black-background.jpg?s=612x612&w=0&k=20&c=Nn74uzTU1_VWvGBdgr0Fk6Ahmqfj5ZX51WHjF1Vodts=">
    </div>
</div>