Estoy intentando darle formato a tres imágenes que originalmente tienen tamaños muy diferentes. La idea es que cada imagen esté debajo de otra y formen un bloque vertical, además, que estas tengan un color de fondo (#5a6f99), el cual, se extienda por toda la página. Sin embargo, tengo la duda de cómo puedo lograr hacerlo en CSS (el archivo HTML no debe ser modificado). Lo que muestro en CSS genera un color de fondo en cada contenido pero no abarca toda la página y no tiene el color de manera continua. Además, deseo que las tres imagenes inicien debajo y de lado izquierdo de mi imagen de fondo que coloqué en el header de CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ultimate Frisbee - Home</title>
<link rel="stylesheet" href="css/hw1.css">
</head>
<body>
<header>
<h1>Ultimate Frisbee</h1>
<nav>
<a href="index.html" class = "active">Home</a>
<a href="teams.html">Teams</a>
<a href="history.html">History</a>
<a href="http://www.usaultimate.org/index.html" target="_blank">USA Ultimate</a>
</nav>
</header>
<main>
<aside class = "left">
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg" alt="Ultimate Frisbee"></a>
</aside>
CSS:
* {
margin: 30px;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
header {
background-image: url("../images/flywheel.jpg");
background-repeat: no-repeat;
background-size: cover;
}
header h1 {
text-align: center;
font-size: 35px;
color: #faf0d4;
text-transform: uppercase;
}
header a {
text-decoration: none;
background: rgba(190, 194, 204, 0.6);
color: #1f2638;
font-size: 19px;
display: inline-block;
padding: 1rem 4.5rem;
margin: 25px;
border-radius: 25px;
}
aside a {
float:left;
background-color: #5a6f99;
}
.left img {
width: 200px;
height: 150px;
object-fit: cover;
display: flex;
margin-bottom: 35px;
border: 5px #191c1a solid;
border-radius: 25px;
}
.right h2 {
font-size: 35px;
}
.right p {
font-size: 20px;
}
.right table {
font-size: 20px;
}