How to make all navigation elements the same size?

Question

I have been working on a html and css website for my design class.This is the design that needs to be implemented in code is Fig 1.The website that I have made so far is** Fig 2**.I can't figure out how to make the boxes all the same size.Furthermore is it possible to add ">" to the end as in Fig 1.Thanks in advance.

If you require my source code please ask.

I have tried some box methods but I am a bit lost.

For the ">" I tried adding spaces but nothing worked

Answer 1

The source code would be helpful but, assuming a simple implementation.

You could have the box class with a display flex with two spans/divs: the text and the '>'. Put justify-content to space between, and they will be as far apart as possible.

As for the size, min-size is a start, but you'll have to take into account the responsiveness of the page:

box-class {
 display:flex;
 justify-content: space-between;
 min-width: 200px;
}