Expected behavior change the CSS so that the mvc view page can use the entire screen width and height. Be able to add a background image that is full screen even when zoomed out, and there are no duplicates.

and each view page in mvc that uses shared layout? must show the shared navbar that exists in the shared layout. full screen page.
Actual behavior there is a massive border, padding of about 20%. if a background image is set it still has a large white border of wasted space even if set to full screen, 100% or most any css setting, it is not actually full screen.

On a 40" monitor, in any view page, there is a 2" gap on the left/right and 1.5" gap top/bottom. just wasted space.

have tried many CSS settings, cannot find where the pages are set this way.

If this was a standard 8.5 x 11 paper? then it would be like having an image thats 6 x 8 set on top. no, it must be full size, 100% no extra padding

Resources (screenshots, code snippets etc.) (I changed some of the html so it wont render here)

@{ ViewBag.Title = "Index"; }

2>Index

< iv class="modal-backdrop" style=" z-index: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../../Content/a11.PNG');
    height: 100vh;">

now the image is full. but there are no Navbars visible. if I change it to:

@{ ViewBag.Title = "Index"; }

h2>Index

< iv class="bg-image" style=" z-index: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../../Content/a11.PNG');
    height: 100vh;">

now it has the 20% border wasting the page.

Am trying to find the setting forcing the page to be using the 40% padding, need to use the full screen for images or content?

ANY suggestions are appreciated. thank you