Image won't fill div - html

Question

so basically I'm creating a fake Italian restaurant site and the images in the img-container wont fit the box, leaving a line below the image. Also, the img-container overflows past the image which I don't want it to do. Any help appreciated.
Here is my code
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap");
/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
background-color: #dee7e7;
font-family: "Open Sans", sans-serif;
}
/* Nav */
nav {
margin-top: -35px;
height: 70px;
background-color: #fff;
margin: 0px 0px 35px 0px;
height: 60px;
padding: 20px;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: #000;
}
nav a:hover {
cursor: pointer;
}
.nav-links {
float: right;
margin-top: -25px;
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.nav-links .current {
font-weight: 700;
text-decoration: underline;
}
.nav-links a {
padding-right: 10px;
font-size: 16px;
text-decoration: none;
color: #000;
font-weight: 400;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links a:visited {
color: #000;
}
header nav h3 {
font-family: "Libre Baskerville", serif;
font-size: 26px;
}
/* Showcase 1 */
.showcase {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 20px;
}
.text-container {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container p {
font-size: 16px;
padding-right: 10px;
}
.btn-primary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #06a77d;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px grey;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container {
background: #c9d7d7;
}
.img-container img {
margin-left: 80px;
overflow: auto;
height: 500px;
}
/* Showcase 2 */
.showcase-2 {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 30px;
background: #192534;
color: #fff;
}
.text-container-2 {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 16px;
order: 1;
}
.text-container-2 h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container-2 p {
font-size: 16px;
padding-right: 10px;
}
.btn-secondary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #cc224e;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px black;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container-2 {
background: #3d5777;
padding-right: -300px;
order: 2;
}
.img-container-2 img {
margin-left: 80px;
max-width: 100%;
height: 510px;
}
.img-good-food img {
float: right;
max-width: 100%;
height: 130px;
margin-right: 20px;
}
.page-title {
text-align: center;
margin-bottom: 30px;
font-family: "Libre Baskerville";
}
.about-container {
place-items: center;
margin: 10px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.about-container p {
font-size: 16px;
padding-right: 10px;
margin-left: 20px;
}
.about-container button {
margin-left: 20px;
}
.menu-text {
text-align: center;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 20px;
}
.menu-container {
display: flex;
justify-content: center;
background: #3d5777;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 20px;
}
.fa-chevron-left {
font-size: 30px;
float: left;
margin-right: 200px;
margin-top: 300px;
color: #fff;
}
.fa-chevron-right {
font-size: 30px;
float: left;
margin-left: 200px;
margin-top: 300px;
color: #fff;
}
.menu-container img {
max-width: 100%;
height: 650px;
margin: 10px;
}
iframe {
margin-top: 40px;
float: right;
margin-right: 100px;
width: 600px;
box-shadow: 1px 1px 1px 1px grey;
}
.contact {
background: #3d5777;
width: 400px;
height: 200px;
color: #fff;
margin-left: 120px;
margin-top: 160px;
place-items: center;
justify-content: center;
padding-top: 30px;
}
.contact p {
margin-bottom: 5px;
}
.fas {
margin-bottom: 5px;
font-size: 16px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
background: #192534;
padding: 10px;
}
footer h2 {
color: #fff;
font-size: 14px;
}
footer a {
color: #8abeff;
}
<header>
<nav>
<a href="">
<h3 class="logo">Chef Italia</h1>
</a>
<div class="nav-links">
<a class="current" href="index.html">Home</a>
About Us
Menu
Contact
</div>
</nav>
</header>
<div class="showcase">
<div class="img-container">
<img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
</div>
<div class="text-container">
<h1>Welcome to Chef Italia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<button class="btn-primary">Find out more</button>
</div>
</div>
</div>
<div class="showcase-2">
<div class="img-container-2">
<img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
</div>
<div class="text-container-2">
<h1>Authentic Italian Food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-secondary">View Our Menu</button>
</div>
</div>
<div class="showcase">
<div class="img-container">
<img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
</div>
<div class="text-container">
<h1>Good Food Awards Winner 2019</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-primary">Find Out More</button>
<div class="img-good-food">
<img src="img/good-food.png" alt="Good Food Awards Logo">
</div>
</div>
</div>
<footer>
<h2>© Chef Italia 2021. Designed and developed with 💙 by Tyler Lechowski</h2>
</footer>

Answer 1

Did you try to just add:
.img-container {
position:relative
}
.img-container img {
height: 100%;
width: 100%;
}
To define image size you can add for example:
.img-container {
position:relative;
width: 200px;
height: 200px;
}
but be sure you add it to .img-container, not .img-container img. In .img-container you define size in pixels but in .img-container img you make it 100% for width and height to fill whole container

Answer 2

Try adding this:
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
height: 100%;
min-width: 100%;
object-fit: cover;
position: absolute;
}
Oveflow hidden to hide any part of the picture that comes outside the container. Object-fit cover to make it cover the container. If you want smaller picture just specify height and width on the container.