"justify-self: " "; " Não funciona.
Oi pessoal, estou criando um site e encontrei um problema que não consigo solucionar.
Meu código HTML:
<html>
<head>
<link href="./Entry.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="top">
<h1>TRACT</h1>
<div class="box a">A</div>
<div class="box b">B</div>
<a href="./myaccount.html">My Account</a>
<div id="cart"><a href="./cart.html"> <img src="./cart.png" height:"30px" width="25px" /></a></div>
</div>
<div class="nav">
<a href="./shop.html"><h2 id="shop">SHOP</h2></a>
<a href="./inspired.html"><h2 id="inspired">INSPIRED</h2></a>
<a href="./aboutus.html"><h2 id="about">ABOUT US</h2></a>
<a href="./gallery.html"><h2 id="gallery">GALLERY</h2></a>
</div>
</body>
</html>
Meu código CSS:
.top {
display: grid;
height: 4%;
width: 100%;
grid-template-columns: 600px 200px 500px 100px;
align-items: center;
align-content: center;
position: fixed;
}
.top a {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
z-index: 5;
color: white;
text-decoration: none;
}
#cart {
grid-row: 1 / span 1;
grid-column: 4 / span 1;
z-index: 5;
justify-self: center;
height: 50px;
width: 40px;
}
h1 {
grid-column: 2 / span 1;
justify-self: center;
}
.box {
background-color: black;
}
.a {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
}
.b {
grid-row: 1 / span 1;
grid-column: 3 / span 2;
}
.nav {
display: grid;
height: 12%;
width: 100%;
grid-template-columns: 350px 350px 350px 350px;
align-items: center;
align-content: center;
position: fixed;
margin: 20px;
padding: 20px;
}
.nav a {
text-decoration: none;
color: black;
width: 200px;
border: 2px black solid;
text-align: center;
}
#shop {
grid-column: 1 / span 1;
}
#inspired {
grid-column: 2 / span 1;
}
#about {
grid-column: 3 / span 1;
}
#gallery {
grid-column: 4 / span 1;
}
---------------------------------
Não importa o que eu faço, quando tento colocar justify-self: start; ou justify-self: end; nos itens com ID #shop #inspired #about e #gallery, eles simplesmente não saem do lugar.
Alguém consegue perceber por que?Discussão (3)
Carregando comentários...