I have a standard 3-column layout with similar images in the left and right columns. When I resize the page, the right image becomes smaller but the left image does not. This causes the middle container to overflow past the left image.
Here is the CSS for image resizing:
img {
display: block;
max-width: 100%;
height: auto;
}
Here is a snippet of my full code:
<!doctype html>
<html lang="en>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div style="position:fixed;">
<a href="javascript:window.history.back();"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" /></a></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
(Lorem Ipsum text here)
</div>
</div>
</div>
<div class="brd_black col">
<div style="position:fixed;">
<a href="faq.html"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" /></a></div>
</div>
</div>
</div>
</div>
</body>
</html>But why is this happening?