width of container / width of div does not occupy the entire width of the page even when changing to different screen resolutions

I have my App in React.js:

<header className="header__section">
    
</header>

Here is my CSS file (SCSS):

.header__section {
    width: 120rem; 
    height: 48rem;
    background-image: url("../Assets/someimage.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

I tried adding the following to my CSS (SCSS) file:

I also tried adding:

body, html{
    width: 100%;
    height: 100%;
}

/** but it did not fix it as well */

The problem is that the header__section’s width does not occupy the entire width of the page, instead, there is a white area on the right, for some reason the header does not stretch to the entire width of the screen, even when changing to different screen resolutions.

Here is a screenshot of the header__section:

What is a possible fix to the above ?

Answer

You should just be able to set the width of .header__section to 100% rather than 80rem