CODEWITHSUNDEEP
htmlcss
Kuban Zhekshenov
Kuban Zhekshenov

Reputation: 3

How do I center the borders

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>

Upvotes: 0

Views: 68

Answers (3)

DCR
DCR

Reputation: 15685

ul's have default margin and padding that you need to clear.

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

ul{
margin:0;
padding:0;}

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

.menu a {
color: green;
font-size: 18px;
border: 2px solid green;
border-radius: 6px;
clear: both;
padding: 10px 5px;
}
<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>

Upvotes: 1

Burham B. Soliman
Burham B. Soliman

Reputation: 1562

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>

Upvotes: 1

mitchell
mitchell

Reputation: 286

If understand correctly you are trying to center the div with class="menu"

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

Upvotes: 0

Related Questions