How do I apply padding to everything but the nav header background width

I am trying to set up a website where 10% padding applies to each element EXCEPT for the navbar background width (want the black header/navbar to always be 100% while the elements within the header (logo/nav bar) have 10% padding on either side.

I have tried 1. Apply padding to body :excepting navbar background 2. Tried to apply padding separately to every element but the navbar 3. Played around with classes/ids to make the nav bar the top priority. 4. Tried to set negative padding for the header.

I am sure there must be a solution where I can add 10% padding to the body and exclude the nav bar header but I am not finding it :(

Here's the relevant html and css:

<nav class="navigation-bar">
      <img class="logo" src="../myFirstWebsite/assets/aperture.svg" alt="Apperture logo">
        <a href="#">HOME</a>
        <a href="#">WIKI</a>
        <a href="#">GITHUB</a>
        <a href="#">LINKEDIN</a>         
 </nav>

body {
    background-image: url(../myFirstWebsite/assets/topography.png);
    font-family: 'Courier New', Courier, monospace;
}
h3, .title, a {
    color: #ff0099; 
}
.navigation-bar {
    width: 100%;  
    height: 80px; 
    background-color: #333333; 
}
.logo {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    margin-right: 20px;
    margin-top: 15px;    
    padding-left: 10%;
}
.navigation-bar > a {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    line-height: 80px;
    float:right;