Centering hero image on zoom

I've browsed a whole lot of posts on here, some of which relate more closely to my issue than others; yet I've still to find a solution/explanation. -- Sorry if I've missed the answer somewhere!

Here goes.

I have this issue on with regards to a hero image on a site I'm creating, that I'd love to see resolved before I venture any further.

My issue is, that currently, on zoom, it goes towards the upper left corner, and adds a horizontal scrollbar at the bottom.

Ideally I'd like for the hero image to be centered when I zoom in with the browser, and for there to be no horizontal scrollbar.

Hopefully there's a simple fix, or something obvious I'm missing, and you lot could provide my feeble mind with an explanation as to what exactly it is that I'm not getting.

Below is provided the HTML and CSS I have so far. - Thanks in advance!

* {
    margin: 0;
    padding: 0;
    font-size: 10px;
    
}

.hero_Image {
    height: 1080px;
    width: 1920px;
    background-image: url("https://i.imgur.com/NVdZ3Ja.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 1px solid lightgray;

    margin: 0 auto;
    position: relative;
    box-sizing: border-box
    
}

.preview {
    height: 50rem;
    width: 1920px;
    margin-left: 10%;
    background: green;
    margin: 0 auto;
}

<!doctype html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>treadwell.io</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <section class="hero_Image">

        </section>
        <section class="preview">
            
        </section>
    </body>
</html>

Solution

to fix your problem add this css to your file and your problem is that you let the width of sections overflowing

		.hero_Image {
			height: 500px;
			width: 500px;
			background-image: url(https://images.homedepot-static.com/productImages/6c9e2ae9-7592-4de9-8ca9-2692bb908be7/svn/commercial-electric-specialty-meters-ms602h-64_1000.jpg);
			background-repeat: no-repeat;
			background-position: center;
			background-size:cover;
			border-bottom: 1px solid lightgray;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
			margin: 0 auto;
		}		

		.preview {
			height: 500px;
			width: 500px;
			margin-left: 10%;
			background: green;
			margin: 0 auto;
			overflow:hidden;
		}

<!doctype html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>treadwell.io</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <style>
	</style>
    <body>
        <section class="hero_Image">

        </section>
        <section class="preview">
            
        </section>
    </body>
</html>