Menu
This is my html:
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align: ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
.home,
.csgo,
.steam,
.info {
z-index: 1;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
padding: 10px 15px;
border-radius: 20px;
float: center;
}
.home:hover {
background-color: rgba(50, 150, 250, 1);
}
.HCSI,
li {
color: #000;
padding: 0px;
display: inline-block;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
word-spacing: 90px;
}<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
<ul>
<a href="">
<li class="home">Home</li>
</a>
<a href="http://store.steampowered.com/app/730/">
<li class="csgo">Csgo</li>
</a>
<a href="">
<li class="steam">Steam</li>
</a>
<a href="">
<li class="info">Info</li>
</a>
</ul>
</div>
</body>
</html>If you put these in a code tester, there should be 4 blue boxes inside of a white one but my problem is I can't get all 4 boxes to align with the center of the white one. I'm trying to get the padding on all sides of the blue boxes to be the same.
635
Just fix text-align
make it text-align:center;
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:center ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
