How to decrease margin between links with flexbox

Question

Hi I’m trying to decrease distance between links and change side this hamburger icone.
I’ve tried the most I could was a space-aroud on ul on mobile, JS is font-awesome.
If anyone can take a look

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
ul{
    display: flex;
    justify-content: space-between;
    list-style: none;
}
a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
    transition: .3s;
}
main{
    width: 100%;
    height: 100vh;
    background: url(https://i.imgur.com/OHevbgD.jpg)no-repeat center /cover;
}
.socialIcon{display: none;}
header{
    position: relative;
    width: 100%;
}
.top{
    background: #ef3624;
    padding: 20px 0;
}
.container{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top ul li{
    margin-right: 15px;
}
.top ul li a{
    color: #fff;
}
.top ul li a:hover{
    color: #222;
}
nav{
    background: #333;
    position: relative;
    padding: 15px 0;
    z-index: 10;
}
.logo{
    position: absolute;
    width: 150px;
    height: 150px;
    top: -60px;
    left: 35%;
}
nav ul{
    width: 100%;
    transition: .3s;
}
nav ul li:nth-child(4){
    margin-left: 250px;
}
nav ul li a{
    color: #ff0;
    font-weight: bold;
}
nav ul li a:hover{
    color: #ef3624;
}
#menu{
    display: none;
}
label{
    color: #fff;
    font-size: 1.2em;
    padding: 15px 0;
    display: none;
}
.logomobile{
    display: none;

}
@media (max-width: 960px){
    .logomobile img{
        width: 280px;
        height: 70px;
        margin-top: 23px;
       margin-left: 10px;
        position: absolute;
        top: 0px;
        display: block;
    
    }
    .logomobile{
        display: block;
    }

    label{
        display: block;
    }
    .container{
        padding: 0 40px;
    }
    .social li:nth-child(1),
    .social li:nth-child(2){
        display: none;
    }
    .logo{
        left: 38%;
        top: -40px;
    }
    .logo img{
        width: 150px;
    }
    nav{
        padding: 0;
    }
    nav ul{
        position: absolute;
        top: -70px;
        width: 300px;
        height: 100vh;
        padding-top: 110px;
        left: -100%;
        background-color: darkred;
        box-shadow: 8px -8px 10px rgba(0, 0, 0, 0.5);
        flex-direction: column;
    }
    ul{
        display: flex;
        justify-content: space-evenly;
        list-style: none;
    }
    #menu:checked ~ ul{
        left: 0;
    }
    
    nav ul li{
        margin: 0 !important;
        width: 100%;
    }
    nav ul li a{
        padding: 10px 0;
        text-align: center;
        margin: 3px 0;
    }
    nav ul li a:hover{
        background: #ff0;
    }
    .socialIcon {
        display: block;
        text-align: center;
    }


.socialIcon a i{
    margin-top: -7px;
}
    .socialIcon a {
        color: #fff;
        display: inline-block;
        text-align: center;
        background-color: blueviolet;
        width: 43px;
        height: 43px;
        padding: 3px;
        border-radius: 100%;
        font-size: 33px;
        margin-right: 14px;
    }

    .socialIcon a:last-child {
        margin-right: 0;
    }
}
@media (max-width: 460px){
    .logo{
        top: -30px;
    }
    .logo img{
        width: 100px;
    }
    
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
    <header>
        <div class="top">
            <div class="container">
                <ul class="lang">
                    <li><a href="#"><img src="https://i.imgur.com/leHaUgG.png"></a></li>
                    <li><a href="#"><img src="https://i.imgur.com/SohMqKL.png"></a></li>
                    <li><a href="#"><img src="https://i.imgur.com/riHCPOo.png"></a></li>
                </ul>
                <ul class="social">
                    <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                    <li><a href="#"><i class="fas fa-phone-alt"></i>[phone]</a></li>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                </ul>
            </div>
        </div>

        <nav>
            <div class="container">
                <a href="#" class="logo">
                    <img src="https://i.imgur.com/YvlbgP5.png">
                </a>
                
                <input type="checkbox" id="menu">
                <label for="menu"><i class="fas fa-bars" style="font-size:34px"></i></label>
                <ul class="menuList">
                    
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Our Team</a></li>
                    <li><a href="#">Contact</a></li>
                    <div class="logomobile">
                        <img src="https://www.novitrine.com.br/images/noticia/A55720da696c81.jpg" alt="">
                    </div>
                    <div class="socialIcon">
                        <a href="http://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
                        <a href="jsls.com" target="_blank"><i class="fab fa-youtube"></i></a>
                        <a href="jsls.com" target="_blank"><i class="fab fa-facebook"></i></a>
                        <a href="jsls.com" target="_blank"><i class="fab fa-google"></i></a>
                    </div>
                </ul>
            </div>
        </nav>
    </header>
    <main></main>

Answer 1

Hello friend all right? good.. come on,

The easiest way for you to change the burger icon to the right side is to add a style in the container that is inside the Nav, you can create a new class with these styles:

New css class:

.flex {
  display: flex;
  justify-content: flex-end;
}

html code with new class

<nav>
  <div class="container flex">
    ....
  </div>
</nav>

And to narrow the gaps between the links you can change the line-height of the links, like this:

nav ul li a {
  line-height: 10px;
}

I hope I’ve helped :)