Image overflowing grid item

Hey everyone! I’ve tried everything with this for about 3 hours now and I can’t seem to figure out a solution. For some reason, my image keeps overflowing the grid item! Any help you could offer would be so so appreciated.

I’ve tried declaring a 100% width in the HTML for the image, which does scale it down to fit within the box, but it doesn’t reach the bottom and also doesn’t respond well to rescaling. So now I’m trying that along with applying object-fit: cover, but now it’s just a massive image again. I tried doing a background-size: cover, but that didn’t seem to do anything at all, so maybe I just did it wrong. Does anyone have any ideas? I’m pretty new to the grid.


    <section id="grid">
        <div class="box">
            <div class="img-content"><img src="./images/hp-img1.png" width:100%></div>

        <div class="box">
            <div class="box-content">Box 2</div>

        <div class="box">
            <div class="box-content">Box 3</div>

        <div class="box">
            <div class="box-content">Box 4</div>


* {
    margin: 0;
    padding: 0;

.img {
    display: block;
    width: 100%;

#grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background-size: cover;

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
        color: $white;
        object-fit: cover;

   .box-content {
        padding: 3rem 4rem;

Here is a screenshot. As you can see, the image is so tall it is pushing the other two grid items further down from view.