ナビのリストが右に詰められない

ヘッダーに収めたナビのリストを右詰にしたいのですが、右に寄せられません。
justify-contentを使用して、flex-end等も試しましたが変化が無く、アドバイス頂ければと思います。

(向かって右側に、横並びにしたまま詰めたい)

※paddingやmarginで詰めると、横のスクロールバーが出てしまうため、リキッドスタイルを意識して作成しているので
難しいのかな、と思います…

   <section>
    <div  id="top" class="big_bg">
        <header class="main_header">
            <nav>
                <ul>
                    <li><a href="#main">Top</a></li>
                    <li><a href="#works">Works</a></li>
                    <li><a href="#profile">Profile</a></li>
                </ul>
            </nav>
        </header>
        <main id="main">
            <div class="board">
                <h1>WELLCOME</h1> 
                <p>　<br>
                WEB site</p>
                <h2>SNS</h2>
                <a href="https://twitter.com/shinitei_njnj"><img src="./img/twitter.png"></a>
                <a href="https://www.instagram.com/xiachuan.lin/"><img src="./img/instagram.png" ></a>
            </div>
            </main>
    </div>
</section>

@charset "utf-8";
html{
    font-size: 2.5vw;
}
* { 
    margin: 0px; 
    padding: 0px; 
}

body{
    font-size: 1rem;
    font-family: Impact,Charcoal; 
    color: white;
}
h1{
    font-size: 8vw;
    color: black;
}
h2{
    font-size: 50px;                   
}
#works, #profile, fotter{
    height: 1080px;        
    background-color: #333333;
}
header{
    background-color: rgba(0,0,255,0.5);
    padding: 0 2%;
    height: auto;
    display:flex;
    justify-content: space-between;
}
a{
    text-decoration: none;
    color: white;
}
.big_bg{
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
}
#top{
    background-color:#FF00FF ;
    background-image: url("../img/top.png");
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
}
nav ul li{
    position: static;
    list-style: none;
}
nav ul li a{
    margin:0 30px;
    font-size: 5vw;
    color: white;
}