Как мне избавиться от ненужных серых пробелов на моем сайте? ⇐ CSS

[Anonymous]

Я пытался избавиться от больших пробелов, которые мне не нужны. Это появилось после того, как я использовал display: Grid, чтобы избавиться от некоторых проблем с позиционированием моих изображений.Пробелы
Вот мои ejs:

Код: Выделить всё

 TCGCards.com 
 Power to the People! [/b] 
[b]

A marketplace for trading card collectors, and players. Here, we have a great and varied selection of
trading card goods from all over the world! You will never find any better deals then this!
[/b][b]









  Browse Our Collection 

Вот мой CSS:

Код: Выделить всё

body{

background-color: gray;
}

.cards{
position: relative;
left: 430px;
top: 50px;
}

.movDetails{

position: relative;
top: 25px;

}

.movImage{

position: relative;
top: 50px;
}

.movIndexImages{
position: relative;
bottom: 50px;
z-index: -1;
}

.hyperlink a{

text-decoration: none;

}

.movNav{
position: relative;
bottom: 90px;
}

footer{

background-color: rgb(217, 205, 205);
color: white;
}

.gridMain{

display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px 100px;

position: relative;
left: 300px;
}

.item1{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

}

.item2{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

position: relative;
right: 300px;

width: 530px;
}

.item3{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width: 300px;

position: relative;
left: 300px;
bottom: 530px;
}

.item4{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width:300px;

position: relative;
left: 300px;
bottom: 460px;
}

.tag-remover a p{

text-decoration: none;

}

.movTcg{

position: relative;
top: 40px;
height: 110px;
}

.movDescription{
position: relative;
right: 300px;
bottom: 100px;
}

.movSearchBar{

position: relative;
left: 350px;

}

.movText{

position: relative;
left: 30px;
top: 40px;

}

.movBrowserBar{
position: relative;
left: 300px;
}

.movHololive{
position: relative;
height: 300px;
left: 200px;
top: 80px;
}

.movFooter{

position: relative;
top: 100%;

/* display:flex; */
align-items:center;
justify-content: space-between;
}

.refFlex{

/* display: flex; */
justify-content: flex-end;
gap: 30px;

/* Why is this refusing to be moved? */
bottom: 50px;

}

/* Ul is whole box container containing ul. */
ul{

list-style-type: none;
display: flex;
justify-content: flex-end;
gap: 20px;

}

/* Targets all li. Makes it seem like it forms a blue box, but
really all it is doing is making sure every li is
colored the set color.  */
ul li{

position: relative;
bottom: 40px;
right: 40px;

}

ul li a{

}

.items{
display: flex;
gap: 100px;
flex-wrap: wrap;
position: relative;
left: 80px;

}

section .movItems{

}

section a img{

height: 400px;
width: 300px;
}

.item1 img{

height: 300px;
width: 200px;
}

Я пытался использовать это:
.tag-remover a p{

Код: Выделить всё

text-decoration: none;

Но это ничего не сделало. Я не уверен, почему возникает эта проблема. Я думал, что это легко исправит ситуацию, поскольку я применяю это к каждому p под тегом a.
Фрагмент кода:

Код: Выделить всё

body {

background-color: gray;
}

.cards {
position: relative;
left: 430px;
top: 50px;
}

.movDetails {

position: relative;
top: 25px;

}

.movImage {

position: relative;
top: 50px;
}

.movIndexImages {
position: relative;
bottom: 50px;
z-index: -1;
}

.hyperlink a {

text-decoration: none;

}

.movNav {
position: relative;
bottom: 90px;
}

footer {

background-color: rgb(217, 205, 205);
color: white;
}

.gridMain {

display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px 100px;

position: relative;
left: 300px;
}

.item1 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

}

.item2 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

position: relative;
right: 300px;

width: 530px;
}

.item3 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width: 300px;

position: relative;
left: 300px;
bottom: 530px;
}

.item4 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width: 300px;

position: relative;
left: 300px;
bottom: 460px;
}

.tag-remover a p {

text-decoration: none;

}

.movTcg {

position: relative;
top: 40px;
height: 110px;
}

.movDescription {
position: relative;
right: 300px;
bottom: 100px;
}

.movSearchBar {

position: relative;
left: 350px;

}

.movText {

position: relative;
left: 30px;
top: 40px;

}

.movBrowserBar {
position: relative;
left: 300px;
}

.movHololive {
position: relative;
height: 300px;
left: 200px;
top: 80px;
}

.movFooter {

position: relative;
top: 100%;

/* display:flex; */
align-items: center;
justify-content: space-between;
}

.refFlex {

/* display: flex; */
justify-content: flex-end;
gap: 30px;

/* Why is this refusing to be moved? */
bottom: 50px;

}

/* Ul is whole box container containing ul. */
ul {

list-style-type: none;
display: flex;
justify-content: flex-end;
gap: 20px;

}

/* Targets all li. Makes it seem like it forms a blue box, but
really all it is doing is making sure every li is
colored the set color.  */
ul li {

position: relative;
bottom: 40px;
right: 40px;

}

ul li a {}

.items {
display: flex;
gap: 100px;
flex-wrap: wrap;
position: relative;
left: 80px;

}

section .movItems {}

section a img {

height: 400px;
width: 300px;
}

.item1 img {

height: 300px;
width: 200px;
}

.tag-remover a p {

text-decoration: none;

}

Код: Выделить всё

 TCGCards.com 
  Power to the People! [/b] 
[b]

A marketplace for trading card collectors, and players. Here, we have a great and varied selection of
trading card goods from all over the world! You will never find any better deals then this!
[/b]









  Browse Our Collection 

Подробнее здесь: https://stackoverflow.com/questions/793 ... my-website