Images wont display next to each other - html

Question

Im trying to get my two images displayed right next to each other. Currently they keep going under each other. I have searched for some help, but all of it keeps the images the same. I hope some of you can understand the html and css and help me out with this one.
The images are inside each of they own form, and both images has gotten some styling so they have a hover effect.
.container {
position: relative;
width: 400px;
height: 400px;
display: inline-block;
}
.image {
width: 400px;
height: 400px;
}
.overlay {
position: absolute;
transition: all .3s ease;
opacity: 0;
background-color: #eee;
pointer-events: none;
}
.container:hover .overlay{
opacity: 1;
}
.text {
color: white;
font-family: sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 20px;
}
.overlayFade {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: #39598cab;
}
.container:hover .overlayFade{
width: 100%;
}
<center>
<form action="FrontController" method="post">
<h2>Vælg hvilken tag type du ønsker</h2>
<div class="container">
<div class="overlay overlayFade">
<div class="text">
<h1>Spidst tag</h1>
Quick-byg carport med spidst tag
</div>
</div>
<input type="hidden" name="command" value="PointedRoof">
<input type="image" src="./IMAGES/spidsTag.jpg" class="image" value="Spidst Tag">
</div>
</form></center>
<center>
<form action="FrontController" method="post">
<div class="container">
<div class="overlay overlayFade">
<div class="text">
<h1>Fladt tag</h1>
Quick-byg carport med fladt tag
</div>
</div>
<input type="hidden" name="command" value="FlatRoof">
<input type="image" src="./IMAGES/fladtTag.png" class="image" value="Fladt tag">
</div>
</form>
</center>

Answer 1

Images are showing under each other because of the block property.
as Center tag has block property by default.
just add given below css in your stylesheet
center{display: inline-block;}

Answer 2

The best way to do is to use display :flex; and align-items:center to the parent.If you want to align both childs at both ends ,just use justify content :space-between
if you want to learn more about flex visit this link
https://css-tricks.com/snippets/css/a-guide-to-flexbox/