Как сделать так, чтобы текст совпадал с картинками под картинками? ⇐ Html

[Anonymous]

Это мой стиль:

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

body{
background-image:url(https://codehs.com/uploads/e23e197f48830f640adb5a4eeebd699f);
background-attachment:fixed;
background-size:cover;
}
p{
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
background-color:purple;
color:red;
font:10px arial;
}
img.books{
height:280px;
width:230px;
margin-right:90px;
}
img.header{
display:block;
margin-left:auto;
margin-right:auto;
height:200px;
}
iframe{
display:block;
margin:auto;
width:100px;
height:100px;
}
.container{
display:flex;
/*margin-left:auto;*/
margin-right:100px;
}
.container div{
background-color:#f1f1f1;
display:block;
/*margin-right:400px;
margin-left:0px;
padding-left:0px;*/
font-size:10px;
}
table.books{
margin-right:75px;
margin-left:auto;
width:450px;
}

table.text{
margin-right:75px;
margin-left:auto;
}
a:link, a:visited, a:active{
color:#3240fa;
text-align:center;

}

#about{
border:4px #af7139 dashed;
background-color:#f4c295;
font:35px Script MT, Perpetua Titling MT;
font-weight:bold;
color:#af7139;
display:block;
margin-left:auto;
margin-right:auto;
width:900px;
}
#nav{
margin-top:10px;/*push underneath the header*/
margin-left:0px;
margin-bottom:0px;
}

#nav ul{
list-style-type:none;
margin:0;
padding:20;
width:160px;
height:100%;
background-color:#000000;
overflow:auto;
position:fixed;
}

#nav li{
text-align:center;
}

#nav li a{
display:block;
color:#00ff00;
padding:8px 16px;
text-decoration:none;
font:16px arial;
font-weight:bold;
}

/*Change the list item color on hover */
#nav li a:hover{
color:#ffffff;
text-decoration:underline;
}

Это мой код:

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

Romance
[*]

[img]Romance.png[/img]


[list]
[url=index.html]Home[/url]
[*][url=about.html]About[/url]
[*][url=Romance.html]Romance[/url]
[*][url=Mystery.html]Mystery[/url]
[*][url=Young-Adult.html]Young Adult[/url]
[*][url=Graphic-Novel.html]Graphic Novel[/url]
[*][url=Biography.html]Biography[/url]
[*][url=Fantasy.html]Fantasy[/url]
[*][url=Horror.html]Horror[/url]
[*][url=Science-Fiction.html]Science Fiction[/url]
[/list]




[img]powerless.jpg[/img]


[img]powerless.jpg[/img]


[img]powerless.jpg[/img]





test
test
test

Я не знаю, что делать. Я использовал контейнер, div, таблицу. Я пробовал несколько раз регулировать и перенастраивать поля, но это не сработало. Я использовал абзац, заголовок.
Вот как бы я хотел, чтобы это выглядело:
введите здесь описание изображения
Я пробовал использовать гибкое поле, но не уверен, что сделал это правильно, потому что это тоже не сработало. Если кто-нибудь знает, как это сделать, дайте мне знать.

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-pictures