I am trying to align Header text using flex. But the alignment does not work the way I expected.

[![enter image description here](https://i.stack.imgur.com/kemcJ.png)](https://i.stack.imgur.com/kemcJ.png)
[![enter image description here](https://i.stack.imgur.com/VXIQ0.png)](https://i.stack.imgur.com/VXIQ0.png)

Here are the two images of Blog and About.

These items are aligned using space-between.

```
container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
} 
// btw, I am using material-ui class

```

However the position of text **Blog** and **About** is different due to the different size and element of the link text and three-dots icon.

How can I locate text **Blog** as same position as **About**?