CSS Image Positioning (square) - html

Question

I have 4 images on my website, I'm trying to position it so that they all form to make an equal square within my DIV however it's coming out like a vertical line of 4 images. I want it appear like 2 vertical lines of 2 images next to each other making it a square with 4 images. Please advise how I would achieve this.
<div id="main-content" class="group">
<img src="mg.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
<img src="4x4.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
<img src="audi.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
<img src="ford.jpg" title="MG" alt="Car" style="max-width:50%;
max-height:50%;">
</div>
#main-content {
max-width:1000px;
width:66.6667%;
float:right;
min-height:1000px;
height:100%;
color:white;
background-color: #0D3D56;
}
Notes: The reason the width is set to 66.6667% is because there is another div on the same page covering the rest of the width.
I'm making this site with responsive design.

Answer 1

JSFiddle
First I cleaned up a few general errors. For example your img tags should look like
<img src=""/>
with a slash. Then I created css to tell all the images to be half of the div's width and height.
<div id="main-content" class="group">
<img src="mg.jpg" title="MG" alt="MG"/>
<img src="4x4.jpg" title="4x4" alt="4x4"/>
<img src="audi.jpg" title="Audi" alt="Audi"/>
<img src="ford.jpg" title="Ford" alt="Ford"/>
</div>
#main-content {
width:66.67%;
float:right;
min-height:1000px;
height:100%;
color:white;
background-color: #0D3D56;
}
img {
float:left;
width: 50%;
height: 50%;
}

Answer 2

I just edited the inline-style for images.
Use the following:
#main-content {
max-width:1000px;
width:66.6667%;
float:right;
min-height:1000px;
height:100%;
color:white;
background-color: #0D3D56;
}
<div id="main-content" class="group">
<img src="mg.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
<img src="4x4.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
<img src="audi.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
<img src="ford.jpg" title="MG" alt="Car" style="width:50%; max-width:50%; max-height:50%;" />
</div>

Answer 3

Alright easiest solution:
1. Go to getuikit.com and download that thing
2. Link the corresponding CSS, js and jQuery.js (google it, you can download it from jQuery.com)
3. Get an overall div for all 4 images and set its class as "uk-grid"
4. Set the class of each image as "uk-width-medium-1-2", you can change the medium part to small or large based on your liking.
5. ???
6. Profit. You now have a set of image positioning that is responsive and will stack when you are looking at it on a smaller screen.