You have a good start. Some helpful tips: Use as descriptive elements and classes as you can, instead of solely divs everywhere. I did notice two different elements (div, img) both had the same class books which can be difficult to style both elements individually. Using sticky elements on the left or right can be difficult to get right (especially trying to center your main content, as using sticky takes that element out of the normal DOM flow.
If you need content beside each other, for example, an image, and text, put those two beside each other in the html.
I have a beginner start for you for your html and css. You did share css that wasn't relevant to the html you provided so I removed it. It uses grid for the books, can be either flex-box or grid, but it is important to have an understanding of both. https://flexboxfroggy.com/ is a good resource for flex-box.
For css, try and keep the styles in order they appear in your html, for instance image header is first, so put the styles first for that.
This wasn't perfected, I'll be happy to help perfect it for you, but play with it first and see what you can do. If you have any questions let me know.
Also I made it a bit responsive with media queries so in the unexpanded view, you'll see the books stacking instead of side by side. Expanding the code snipet should create the look you are seeking, again try to make improvements.
body{
padding: 0;
background-image:url(https://codehs.com/uploads/e23e197f48830f640adb5a4eeebd699f);
background-attachment:fixed;
background-size:cover;
}
img.header {
display:block;
margin-left:auto;
margin-right:auto;
height: 100px;
width: auto;
}
#nav{
margin: 10px 0 0 0;
}
#nav ul{
list-style-type:none;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin:0;
padding: 20px;
width: 160px;
height: auto;
background-color:#000000;
position: fixed;
}
#nav li a {
color:#00ff00;
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;
}
.books-container {
display: grid;
gap: 20px;
grid-template-columns: repeat(1, 1fr);
margin-left: 220px
}
.book-wrapper {
width: 280px;
overflow: hidden;
}
img.book{
height:280px;
width: auto;
}
.book-text {
background-color: yellow; /*or whatever color you wish */
text-align: center;
font-size: 16px;
margin-top: 10px;
padding: 20px;
border: 3px solid red;
}
a:link, a:visited, a:active{
color:#3240fa;
text-align:center;
}
@media (min-width: 576px) {
img.header {
height: 150px;
}
}
@media (min-width: 768px) {
.img-header {
height: 200px;
}
.books-container {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.books-container {
grid-template-columns: repeat(3, 1fr);
}
}
<title>Romance</title>
<link rel="stylesheet" type="text/css" href="style.css">
<img class="header" src="https://placehold.co/400x100" alt="Romance text">
<nav id="nav">
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="Romance.html">Romance</a></li>
<li><a href="Mystery.html">Mystery</a></li>
<li><a href="Young-Adult.html">Young Adult</a></li>
<li><a href="Graphic-Novel.html">Graphic Novel</a></li>
<li><a href="Biography.html">Biography</a></li>
<li><a href="Fantasy.html">Fantasy</a></li>
<li><a href="Horror.html">Horror</a></li>
<li><a href="Science-Fiction.html">Science Fiction</a></li>
</ul>
</nav>
<main>
<div class="books-container">
<div class="book-wrapper">
<img class="book-img" src="https://placehold.co/280x230">
<div class="book-text">text</div>
</div>
<div class="book-wrapper">
<img class="book-img" src="https://placehold.co/280x230">
<div class="book-text">text</div>
</div>
<div class="book-wrapper">
<img class="book-img" src="https://placehold.co/280x230">
<div class="book-text">text</div>
</div>
</div>
</main>
