Full Screen Navigation Overlay with Icons

I am a beginner HTML/CSS Coder, learning how to code. I needed some help in creating a full screen navigation. Here is the design file: Menu Design

W3Schools give an idea as to the approach to make the Full Screen overlay, but I am still a bit perplexed.

Can someone tell me how to approach this. The white boxes in image (2) are icons. I am a little stuck on how the icons should be placed and how the menu can go across the whole screen.

Thanks in Advance!

I suggest you check out flex box by playing the game flex froggy
You can wrap the middle section links inside a div and use flex row to spread it out and then justify-content to add space between each element.

check out this
jsfiddle.

<div class="links">
  <a target="_blank" rel="nofollow" href="">Link 1</a>
  <a target="_blank" rel="nofollow" href="">Link 2</a>
  <section>
    <a target="_blank" rel="nofollow" href="">Link 3</a>
    <a target="_blank" rel="nofollow" href="">Link 4</a>
    <a target="_blank" rel="nofollow" href="">Link 5</a>
    <a target="_blank" rel="nofollow" href="">Link 6</a>
  </section>
</div>

section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}