Padding-bottom does not apply for divs - css

Question

I'd like to move up the stack list a little but it moves only when I apply padding-bottom to the main-container class, which moves the image as well. I want to fix the location of the image and move only the stack list. I'm calling a ProjectBox component from ProjectMain. How should I do that?
ProjectMain.js
import React, { Component } from "react";
import ProjectBox from "./ProjectBox";
export class ProjectMain extends Component {
render() {
return (
<div className="project-main-box">
<div className="project-header">
<div className="header-wrapper">
<div className="project-bullet"></div>
<div className="project-name">Projects</div>
<h4>You can see the websites if you click them</h4>
</div>
</div>
<ProjectBox />
</div>
);
}
}
export default ProjectMain;
ProjectBox.js
import React, { Component } from "react";
import TestImg from "../../test.jpg";
export class ProjectBox extends Component {
render() {
return (
<div className="main-container">
<div className="proj-description">
<div className="description-header">
<h4>CoronaTrace</h4>
</div>
<p>
A website that shows current covid19 cases over the states in the US
with graphs and a table.
</p>
<div className="stacks">
<h6>Stacks Used: </h6>
<ul>
<li>ReactJS</li>
<li>Bootstrap</li>
<li>Express</li>
<li>MongoDB Atlas</li>
<li>Recharts</li>
<li>Heroku</li>
</ul>
</div>
</div>
<div className="img-container">
<a
href="https://www.google.com"
target="_blank"
rel="noopener noreferrer"
>
<img
src={TestImg}
height="100%"
width="100%"
alt="Img Not Found"
></img>
</a>
</div>
</div>
);
}
}
export default ProjectBox;
App.scss
#mixin project-box {
background-color: white;
height: 400px;
width: 700px;
margin: auto;
overflow: hidden;
-webkit-box-shadow: 0 0 15px 3px #b0abaa;
-moz-box-shadow: 0 0 15px 3px #b0abaa;
box-shadow: 0 0 15px 3px #b0abaa;
}
/* Projects Style */
.project-main-box {
background-color: #ede7dd;
height: 100%;
// project header style
.project-header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
.header-wrapper {
padding: 0;
margin: 70px 0 50px 0;
.project-bullet {
#include bullet;
margin-bottom: 4px;
height: 20px;
width: 20px;
}
.project-name {
display: inline-block;
margin-bottom: 40px;
margin-left: 5px;
font-size: 50px;
font-weight: bold;
}
}
}
// ProjectBox Component Style
.main-container {
#include project-box;
margin-bottom: 80px;
.proj-description {
display: inline-block;
width: 55%;
.description-header {
background: blue;
width: 10px;
height: 50px;
h4 {
margin-left: 35px;
font-weight: bold;
color: blue;
}
}
p {
margin: 40px 30px;
}
.stacks {
margin: 0 30px;
}
}
.img-container {
width: 45%;
height: 100%;
display: inline-block;
padding: 0;
overflow: hidden;
}
}
}
It's what it looks like now.