Yeni css öğreniyorum ve deneme amaçlı site oluşturmaya başladım. Ama ne zaman herhangi bir şeye border eklersem o alanın komple düzenini bozuyor. Paddingi ile oynayınca biraz düzeliyor gibi oluyor ama yine de normal olması gibi olmuyor. Border box da ekledim ama hâlâ aynı. Yardım ederseniz sevinirim
Kod :
HTML
<body>
<header>
<nav><!--<label class="logo">Emre Özdemir</label>-->
<ul>
<li><ahref="#">Ana Sayfa</a></li>
<li><ahref="#">Mağaza</a></li>
<li><ahref="#">Siparişler</a></li>
<li><ahref="#">Üyelik</a></li>
</ul>
</nav>
</header>
</body>
CSS
body{
font-family: 'Ubuntu', sans-serif;
}
*{
padding: 0;margin: 0;text-decoration: none;list-style: none;box-sizing: border-box;
}
nav{
background: rgb(54, 56, 56);height: 5rem;width: 100%;
}
ul{
display: flex;align-items: center;justify-content:right;
}
li{
margin: 1rem2rem;background: rgb(3, 216, 84);padding: 0.75rem1rem;border-radius: 20px;box-sizing: border-box;transition-property: all;transition-duration: 0.3s;transition-delay: 0.2s;
}
li:hover{
background: rgb(54, 56, 56);color: rgb(3, 216, 84);border: 1px solid rgb(3, 216, 84);
}
lia{
color: white;text-transform: uppercase;
}
label.logo{
display: flex;color: white;font-size: 2rem;margin: 1rem2rem;padding: 03rem;font-weight: bold;
}