Could someone please explain why I am unable to add margin-top/bottom or padding-top/bottom to this "a" tag? I am trying to center "Konoha" in the header box.
html{
background-color: white
}
body{
width: 88.5%;
height: 1200px;
margin: 0 auto;
border: 2px solid black;
background-color: #161e2c;
}
.top-box{
margin:0 auto;
width: 99.5%;
height: 153px;
background-color: #314e59;
border:1px solid rgb(211, 41, 97);
box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a{
display: inline-block;
margin: 23px 0 0 5px;
padding: 5px 5px;
max-width: 400px;
color: white;
text-decoration: none;
font-size: 500%;
background-color:pink;
border:2px solid black;
}
.right{
margin-top:13;
display: inline-block;
width: 600px;
background-color: pink;
border:2px solid black;
float: right;
text-align:center;
color:white
}
ul{
display: inline-block;
list-style-type: none;
font-size:35px;
width:100%;
padding-left:0;
}
li{
display:inline-block;
padding:7px;
}<body>
<header class = "top-box">
<a href="#" class = "logo">Konoha</a>
<div class = "right">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</header>
</body>Thank you, the issue has been resolved. However, a new problem has emerged.
- Why can't I simply use
margin-top:50%andmargin-bottom:50%on the classes.logoand.right? According to my understanding,margin-bottom:50%andmargin-top:50%should automatically vertically center both.rightand.logowithin their containerheader, but instead they are positioned somewhere random in the middle of the page.
If I use margin-top:x%, then when I resize the window to be smaller, the logo shifts from the center of the header to the top.