When resizing the browser, why does my nav not span 100% and why don't my items stay vertically aligned?

Issue

Staging site: http://staging-netpayadvance.kinsta.cloud/

I have the max-width of the nav set to 100%, but every element stays to the first 1/3 of the nav upon resizing. I also don't know why they aren't staying vertically aligned.

Any insight is helpful!

Solution

You need to add flex properties to your nav:

header .wrapper nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

Flex will arrange the elements side-by-side, Space-between will push them to the outer edges, and finally row-reverse will put your logo on the left side and menu on the right.

And also to your content element:

header .wrapper nav > .content {
  display: flex;
}

Once again, to arrange the elements within this to be side-by-side.

Answered By - PsyenceIO