How can I remove empty space?-CodePudding

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

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)

* {
  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;          
          
        ul{  
          display:flex;
          width:100%; 
          
          li{
              padding:0 10%;
              list-style:none;

              .display{
                color:#fff;            
              }

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

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

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

        }
      }

     
      
    }

}

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

CodePudding user response：

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.