Icon in Secondary Navigation Affecting Text

Hello! I added the following code to add a shopping card icon next to Order Online menu item. It works great, but it affects the alignment of the first link. They are not aligned--I added the red lines so you can see how they are different. Any way to fix?

//Shopping Cart Icon//
.Header-nav--secondary .Header-nav-item:nth-child(1)::before {
  content: '';
  height: 20px;
  width: 20px;
  display: inline-block;
  background: url('https://static1.squarespace.com/static/5fcdc0a3cd8500165ad2a837/t/61300c51f387ea52936de890/1630538833025/shopping-cart+%282%29.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

Hi,

Can you share site url?

@tuanphanHere ya go: https://carrot-bronze-bld8.squarespace.com/ 🙂

@tuanphanthanks again!