Flexbox - inconsistent gap between menu items on navbar

Question

I have a navbar that is wrapping according to the screen size. There are menu items and down arrows. However when I decrease the screen size, the gap between a menu item and arrow isn't same. How can I make them same for all items?

Source code: https://codepen.io/nanokozmos/pen/BaaxOyP

.div1 {
  display: inline-flex;
  width: 100%;
}

.ul {
  display: inline-flex;
  flex-flow: row nowrap;
}

li {
  padding-left: 1em;
  display: inline-flex;
  cursor: pointer;
}

.div2 {
  display: inline-flex;
  align-items: center;
  flex-flow: column nowrap;
}

.div3 {
  position: relative;
  float: right;
  display: inline-flex;
  flex-flow: row nowrap;
}

.div4 {
  position: relative;
  float: left;
}

.div5 {
  display: block;
  flex-flow: row;
}

Edit: I tried every answer in the question 37406353 but they don't work for this question.