html - How do I center the borders

Question

I'm just learning HTML and CSS. I'm trying to design a flex site, but I couldn't solve the problem with borders. So, how can I center the borders? Thank you.

.menu {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-between;
  background-color: skyblue;
  margin-top: 20px;
}

.menu ul li {
  display: inline-block;
  margin-top: 5px;
}

.menu a {
  color: green;
  font-size: 18px;
  border: 2px solid green;
  border-radius: 6px;
  clear: both;
  padding: 10px 25px;
}

<div class="menuBar">
  <div class="logo">
    <img src="images/garanti_logo.png">
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Bireysel</a></li>
      <li><a href="#">Kobi</a></li>
      <li><a href="#">Ticari / Kurumsal</a></li>
      <li><a href="#">Hakk?m?zda</a></li>
    </ul>
  </div>
</div>

Answer 1

change the .menu ul li { display: to inline-flex;

.menu {
width: 100%;
height: 65px;
display: flex;
justify-content: space-between;
background-color: skyblue;
margin-top: 20px;
}

.menu ul li {
display: inline-flex;
margin-top: 5px;
}

.menu a {
color: green;
font-size: 18px;
border: 2px solid green;
border-radius: 6px;
clear: both;
padding: 10px 25px;
}

<div class="menuBar">
        <div class="logo">
            <img src="images/garanti_logo.png">
        </div>
        <div class="menu">
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Bireysel</a></li>
                <li><a href="#">Kobi</a></li>
                <li><a href="#">Ticari / Kurumsal</a></li>
                <li><a href="#">Hakk?m?zda</a></li>
            </ul>
        </div>
    </div>