I'm currently assisting a colleague with his website. His main request is to have the two images positioned below the larger image at the beginning of the page align perfectly with the edge of the page, so that the right image lines up with the one above it.
To address this issue, I developed a small demo. I enclosed the anchors within a flex container and set the flex-basis to 490px. Despite these adjustments, the images are not contained within the anchor elements or the main column container with a width of 1000px. Our goal is to have both images be 490px wide, with the left image aligning on the left edge and the right image aligning on the right edge.
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.kickers {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.kickers > a {
flex-basis: 490px;
}
</style>
<body style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 1000px; height: 1000px; background-color: red;">
<div class="kickers">
<a href="https://www.machinevisiondirect.com/machine-vision-lights.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13601540"></a>
<a href="https://www.machinevisiondirect.com/swmo.html">
<img src="https://sep.yimg.com/ca/I/yhst-172617910-1_2596_13657163"></a></div>
</div>
</body>
</html>Any suggestions on how to achieve this? Thoughts?