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

[Anonymous]

Я пытаюсь сделать свой веб-сайт практики аккуратным и организованным, но столкнулся с парой проблем. Во-первых, моя фотография Yugioh маленькая и не соответствует масштабу и размеру волшебства, которое собирает изображение над ней. Я пытался изменить его высоту и ширину, но он не сдвинулся ни на дюйм и вообще ничего не изменил. Во-вторых, мой баннер Yugioh Card невозможно было переместить дальше в левую часть веб-сайта. Он просто застрял в одном месте.Вот мой 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;

}

.movTcg{

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

.movDescription{
position: relative;
top: 50px;
}

.movSearchBar{

position: relative;
left: 350px;

}

.movText{

position: relative;
right: 0px;
left: 20px;

}

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

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

.movMGT{

position: relative;
height: 190px;
/* Not Working */
right: 99900px;

}

.movFooter{

position: relative;
top: 100%;

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

.movPokemon{

position: relative;
height: 200px;
top: 90px;
left: 680px;

}

.movYugioh{
position: relative;
bottom: 990px;
}

.movMagGlass{

position: relative;
right: 30px;
bottom: 0px;
}

.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;
}

Вот мой HTML:

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

 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 

Я также очень озадачен тем, почему мой нижний колонтитул не на своем месте.
Изображение 2
Я пытался избавьтесь от любых возможных ограничений, таких как display: flex для области баннера с изображением, чтобы исправить предыдущие проблемы с изображениями, поскольку я читал в Интернете, что это могло вызвать проблемы, но это ничего не дало.
Picture1

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