Buttons inside three divs won't center - css

Question

What I am trying to do is when the max width of a screen is 750px I want the buttons inside of my side-bar to be centered both vertically and horizontally using flexbox. Here is what I have tried:
.side-bar {
height: calc(100vh - 55px);
width: 18.5%;
background-color: #F5F5F5;
overflow: auto;
}
.side-bar .content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding-top: 30px;
box-sizing: border-box;
}
.side-bar .button {
margin-bottom: 5px;
}
.side-bar .button:hover i {
color: dodgerblue;
}
.side-bar .button div {
text-align: left;
}
.side-bar .button form {
display: flex;
}
.side-bar .button a {
align-self: center;
margin-left: 12%;
margin-right: 5%;
}
.side-bar .button a i {
color: black;
font-size: 18px;
transition: 0.3s;
}
.side-bar .button input {
border: none;
font-size: 15px;
background-color: Transparent;
}
.side-bar .button input:active {
color: black;
}
.side-bar .sub-title {
margin-left: 12%;
}
.side-bar .sub-title p {
color: #6C6C6D;
font-weight: bold;
font-size: 14px;
}
#media (max-width: 750px) {
.side-bar .content {
justify-content: center;
}
.side-bar .button input {
display: none;
}
.side-bar .sub-title {
display: none;
}
}
<div class="side-bar">
<div class="content">
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-tachometer-alt"></i>
<input type="submit" value="Dashboard">
</form>
</div>
</div>
<div class="sub-title">
<p>TOOLS</p>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-minus-circle"></i>
<input type="submit" value="Ban Panel">
</form>
</div>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-exclamation-circle"></i>
<input type="submit" value="Warn Panel">
</form>
</div>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-gift"></i>
<input type="submit" value="Gift Panel">
</form>
</div>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-user"></i>
<input type="submit" value="User Info">
</form>
</div>
</div>
<div class="sub-title">
<p>NEWS</p>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-newspaper"></i>
<input type="submit" value="News Panel">
</form>
</div>
</div>
</div>
</div>
When when I use justify-content on my content div the children of the content div aren't centered. I would like the buttons centered both vertically and horizontally.
Note on potential duplicates
Before anyone marks this a duplicate, it's not. I looked at the solutions to my last post about it being a duplicate for the same reason and it's not.
How my post is different from my previous post: My previous post I was trying to center a div inside a div, that didn't work out so I tried a different approach and got my result that I wanted. Now, I am trying to center my div inside three other divs but do not understand what it is not centering after using flexbox to center it.

Answer 1

I believe below solution fixes your issue. Content was a little off to the bottom, because .content had only padding-top: 30px, which I changed to padding: 30px 0. I also removed display: none rules, because then, well, nothing was inside this sidebar.
Key part
.side-bar .content {
...
padding: 30px 0;
...
}
Snippet
.side-bar {
height: calc(100vh - 55px);
width: 18.5%;
background-color: #F5F5F5;
overflow: auto;
}
.side-bar .content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 30px 0;
box-sizing: border-box;
}
.side-bar .button {
margin-bottom: 5px;
}
.side-bar .button:hover i {
color: dodgerblue;
}
.side-bar .button div {
text-align: left;
}
.side-bar .button form {
display: flex;
}
.side-bar .button a {
align-self: center;
margin-left: 12%;
margin-right: 5%;
}
.side-bar .button a i {
color: black;
font-size: 18px;
transition: 0.3s;
}
.side-bar .button input {
border: none;
font-size: 15px;
background-color: Transparent;
}
.side-bar .button input:active {
color: black;
}
.side-bar .sub-title {
margin-left: 12%;
}
.side-bar .sub-title p {
color: #6C6C6D;
font-weight: bold;
font-size: 14px;
}
#media (max-width: 750px) {
.side-bar .content {
justify-content: center;
}
.side-bar .button input
}
.side-bar .sub-title {
}
}
<div class="side-bar">
<div class="content">
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-tachometer-alt"></i>
<input type="submit" value="Dashboard">
</form>
</div>
</div>
<div class="sub-title">
<p>TOOLS</p>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-minus-circle"></i>
<input type="submit" value="Ban Panel">
</form>
</div>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-exclamation-circle"></i>
<input type="submit" value="Warn Panel">
</form>
</div>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-gift"></i>
<input type="submit" value="Gift Panel">
</form>
</div>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-user"></i>
<input type="submit" value="User Info">
</form>
</div>
</div>
<div class="sub-title">
<p>NEWS</p>
</div>
<div class="button">
<div>
<form action="http://google.com">
<i class="fas fa-newspaper"></i>
<input type="submit" value="News Panel">
</form>
</div>
</div>
</div>
</div>