Alignment of images - Not spacing out correct after float - html

Question

Having some issues with aligning images side by side on my wordpress staging environment.
I thought this would be the easiest part of the development phase but has actually proven quite difficult.
So in a nutshell, I want to align two images together, with some space inbetween and buttons below them. Simple right?
So I did the following HTML:
<div class="shop-banners">
<ul>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS1">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS2">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>
Here is my CSS that I'm using:
.shop-banners ul {
display: inline-block;
float: left;
width: 40%;
margin-left: auto;
margin-right: auto;
}
.shop-banners li {
display: inline-grid;
margin: 0 20px 0 0;
}
.shop-banners input {
margin-top: 20px;
}
This is how it looks below with the above code:
This is all on our staging environment so I can't link the web page. I just can't figure out why this is happening. I've tried messing around with the width percentage and taken out float but no luck.
Any help would be much appreciated.

Answer 1

That is depends on aspect ration of image , if you have two different images with different aspect ratio that if you set width same that you will get what you want but images resoluions will change , so try to wrap image in on block element set width property then assign image to max-width:100%

Answer 2

please use Li for both sections. into the questions, it's showing only one image use CSS below
.shop-banners ul {
display: inline-block;
float: left;
width: 40%
margin-left: auto;
margin-right: auto;
}
li {
display: inline-grid;
margin: 0 20px 0 0;
}
input {
margin-top: 20px;
}
<div class="shop-banners">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>

Answer 3

So for your code,
You should use width: 50% for images, so that it takes half the screen width.
For spacing between two images, use padding on the containing div.
To arrange the button and image in the above fashion, use flexbox in CSS. By simply arranging them in rows. See below CSS-
I have demonstrated with height and width responsive for the image.
You can change that by simply changing the height of the image to an absolute value.
.shop-banners {
display: flex;
flex-direction: row;
}
.shop-banners__left, .shop-banners__right {
display: inline-block;
width: 50%;
}
.shop-banners img {
width: 100%;
height: 100%;
}
.shop-banners input {
width: 100%;
}
.shop-banners__left {
padding-right: 10px;
}
.shop-banners__right {
padding-left: 10px;
}
<div class="shop-banners">
<div class="shop-banners__left">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ce/4d/0c/ce4d0c6e5769b1ae0e78a09a516bce6a.jpg">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</div>
<div class="shop-banners__right">
<img src="http://vivaglammagazine.com/wp-content/uploads/2017/05/636096742373357996142416222_fashion-beauty-tips.jpg">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</div>
</div>

Answer 4

The code that I used was mainly correct, however it is best practice to encase it in .
The major difference, was scaling down the actual image sizes within the media library of wordpress. Once I did that and modified the width percentage in css, they managed to align without issues.