Как исправить эту проблему с отображением на моем сайте? ⇐ 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 {                        /* Ul is whole box container containing 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]






[url=/cards]  Browse Our Collection [/url]





[img]/images/pokemon.jpg[/img]
[img]/images/yugioh.jpeg[/img]
[img]/images/magic-the-gathering-2-558x331(resized).jpg[/img]

Я также очень озадачен тем, почему мой нижний колонтитул не на своем месте.
[img]https://i .sstatic.net/O9iIVNQ1.png[/img]

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



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