Locking Header to Background Image – Clean window resizing CSS Help

I’ve been doing searching and can’t really find anything (maybe I don’t know the correct search terms to explain my issue).

Currently, I’m working on getting my semi-transparent header to match up over my background image: https://www.mark-pimentel.com

They are both 1000px wide but only match up when the browser window is resized to the width of 1000px

I’d like to get the header and background image (actually, it’d be ideal for all the elements I will later include in the page) to stay in the center of the page regardless if the window is resized or not.

i.e. If I were to make the window smaller, the divs don’t move and continue to keep the same “scale” or spacing apart from each other regardless of browser window size.

Any help would be greatly appreciated guys!

here’s my css:

body {
	font-family: arial;
        background: #ffffff url('https://www.mark-pimentel.com/wp-content/themes/scratch/images/main2.jpg') fixed no-repeat top center;
        height:1300px;
        width:1000px;
}

.clear {
	clear:both;
}

#header {
        background: url(https://www.mark-pimentel.com/wp-content/themes/M45TH2/i/header-bg.png) fixed no-repeat top center;
	height: 263px;
	overflow: hidden;
}

#header-wrapper {
                width: 1000px;
                height:263px;

}

#content-wrapper {
	width: 250px;
        height:900px;

}

#content {
        background-color:rgba(0,0,0,0.5);
	width: 250px;
        margin: 20px auto 20px;
        padding: 10px 0 0 10px;
}