How can I remove empty space?

Question

[There is unnecessary space in right navigation or is there anyway to float list on the right side?][1]

I wanted to place Lists on the right side but there was empty space in the navigation, how can I remove it?

I need some space between them to place png Images logo

There is my Code

(Links Images Styling/Header Lists Blockquotes Code HTML Tables)

<template>
  <header>
      <nav class="container">
          <div class="left-nav">
              <ul>
                  <li><router-link class="display" to="#"><font-awesome-icon icon="display" /></router-link></li>
                  <li><router-link class="download" to="#"><font-awesome-icon icon="download" /></router-link></li>          
              </ul>
             
          </div>
         
         
          
          <div class="right-nav">
              <ul>
                  <li><router-link class="link" to="#"><font-awesome-icon icon="table-list" /></router-link></li>
                  <li><router-link class="link" to="#"><font-awesome-icon icon="bell" /></router-link></li>       
                  <li><router-link class="link" to="#"><font-awesome-icon icon="magnifying-glass" /></router-link></li>       
                  <li><router-link class="link" to="#"><font-awesome-icon icon="bars" /></router-link></li>                  
              </ul>
          </div>
          
      </nav>

      
  </header>
</template>

<script>

export default {
    name:'Home',
    components:{
        
    }
}
</script>

<style scoped lang="scss">
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nanum Gothic', sans-serif;  
}

header{
    background-color:#303135;    
    z-index:99;
  
    nav{
      display:flex;      
      padding:2% 8% 3% 8%;

      .left-nav{
          display: flex;
          align-items: center;  
          flex:1 auto;   
             
          
        ul{  
          display:flex;
          width:100%; 
          
          li{
              padding:0 3%;
              list-style:none;

              .display{
                color:#fff;            
              }

              .download{
                color:#324B57;           
              }
            }
          
          
        }
      }

      .right-nav{
          position:relative;
          display:flex;          
          align-items: center;         
          justify-content: flex-end;          
          flex-basis:20%; 
          flex:1 auto;   
          
         ul{             
            display:flex; 
            margin-right:10%;
            min-width: 0;
            white-space: nowrap;

            li{
              padding:0 10%;
              list-style:none;
               .link{
                color:#fff;              
              }
            }
            
            

        }
      }

     
      
    }

}

</style>

Answer 1

This makes .right-nav to fill up the empty space.

  .right-nav {
    flex:1;
  } 

If I understand you correctly, you need to move that line to .left-nav

  .left-nav {
    flex:1;
  } 

By moving it, you will make .left-nav push .right-nav to the right. Normally, you type flex: 1 1 auto to have a flex item to fill up the any empty space.