White edge/block to the right of navigation bar?(HTML)

Question

I made a website with a navigation bar at the top. I used the background element to change its background and it stops where the navigation ends. I also added a background to the rest of the site as a div by itself. The problem is that this extends further than the background of the navigation. This leads to there being a slider at the bottom of the page and a white block to the right of the navigation.

.menu-navigation-basic {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: right;
    padding-right: 5%;
    padding-bottom: 10px;
    padding-top: 10px;
    background-image: url("images/Background.jpg");
    background-repeat: no-repeat;
    background-size: cover;

}

.menu-navigation-basic a {
    color:  #809098;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin: 0 20px auto;
    line-height: 2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-top: 10px;

}

.background{
    background-image: url("images/Background.jpg");
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.9;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position:relative;
    padding-left: 5vw;
}

Answer 1

You should remove width: 100vw in .background. Width of background element is sum of content's width and padding. And Padding of body and background is not zero, so, background element is wider than body and it makes white block.