I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to accept any styling.
Update: In response to a request, I have now included the entire code snippet for the page. Can someone help me figure out how to round the borders of my photos and align them in the center without using classes? Any assistance would be greatly appreciated.
/* Add a background color with some padding to the body */
body {
background: #383F51;
font-family: Geneva, sans-serif;
}
/* Header and Blog Title */
header {
background: #91c7b1;
margin-top: 15px;
padding: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
}
header h1 {
font-size: 42px;
font-family: "Electrolize", sans-serif;
}
header p {
font-style: italic;
font-size: 24px;
}
/* navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
display: block;
height: auto;
width: auto;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* navigation bar links */
nav a {
float: left;
color: white;
text-align: center;
font-size: 20px;
padding: 10px;
margin-left: 5px;
text-decoration: underline;
font-family: "Electrolize", sans-serif;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.rightcolumn {
flex: 1;
}
.leftcolumn {
flex: 5;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.row {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;}
main > .row {
display: flex;
}
@media screen and (max-width: 800px) {
main > .row {
flex-direction: column;
}
}
/* images (work in progress at the moment) */
/* Post layout for articles and additional areas */
.post {
display: block;
background-color:white;
padding: 20px;
margin-top: 10px;
border-style: solid;
border-color: #91c7b1;
border-radius: 20px;
}
article h2, article h2 a, .post h2 {
font-size: 24px;
text-decoration: none;
color: #533A71;
}
article h5{
font-size: 16px;
}
.post p {
line-height: 1.5em;
font-size: 16px;
}
img {
display: block;
border-radius: 20px;
max-width: 100%;
height: auto;
}
ul {
line-height: 25px;
font-size: 18px;
font-style: italic;
list-style-type: none;
padding: 0;
}
ul li:not(:last-child) {
margin-bottom: 10px;
}
/* Footer */
footer {
color: black;
margin-top: 10px;
left: 0;
bottom: 0;
width: 100%;
background-color: #91c7b1;
text-align: center;
font-size: 18px;
border-radius: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Project Incredible Indie Games</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- End Header -->
<!-- Begin Navigation -->
</header>
<nav role="navigation">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="Ori-and-The-Blind-Forest.html">Reviews</a>
<a href="Contact-form.html">Contact</a>
</nav>
<!-- End Navigation -->
<!-- End Header -->
<!-- Begin Main Content -->
<main role="main">
<div class="row">
<!-- Begin Blog Posts -->
<section class="leftcolumn">
<article class="post" role="article">
<h2> <a href="Ori-and-The-Blind-Forest.html">Ori and The Blind Forest: A Soulful and Stunning Action-Platformer</a></h2>
<h5><time datetime="2021-09-22">Sep, 22 2021</time></h5>
<figure>
<img src="ori-and-the-blind-forest.jpg" alt="Ori and The Blind Forest Game Cover" aria-label="Ori and The Blind Forest Game Cover">
<figcaption>Ori and The Blind Forest Game Cover </figcaption>
</figure>
<p>Ori and the Blind foret tells a story of courage, love, and sacrifice through a beautifully displayed and fluid Metroidvania style platformer. Click on this article's title to see what makes this game such an enjoyable experience!</p>
</article>
<article class="post">
<h2>Ori and The Will of the Wisps</h2>
<h5>Sep 23, 2021</h5>
<p>This sequel to Ori and the Blind Forest both builds on the story of the previous game and expands gameplay by including new skills and weapons. Depite the improvement, this game keeps the charm of Ori and is sure to please any fan.</p>
</article>
</section>
<!-- End Blog Posts -->
<!-- Begin Sidebar -->
<aside class="rightcolumn" role="complementary">
<section class="post">
<h2>About Me</h2>
<p>Well hello there, my name is Abby Lake and I humbly welcome you to 'Project Incredible Indie Games'</p>
<p> To learn more, please click on the 'about' tag on the upper navigation bar </p>
</section>
<section class="post">
<h2>Upcoming Posts</h2>
<ul>
<li> Endless Ocean </li>
<li> Endless Ocean: Blue World </li>
<li> Rime </li>
</ul>
</section>
</aside>
<!--End Sidebar -->
</div>
</main>
<!--End Main -->
<!--Begin Footer-->
<footer class="footer" role="contentinfo">
<p>Blog Created by: Abby Lake</p>
</footer>
<!--End Footer-->
</body>
</html>