Hello! I have an assignment for a class of mine that I am working on and the basic idea is to redesign a website. For the home page I am working on I wanted to create a tile display of images.

http://gyazo.com/25abc4eec46990536abef1842c1ab425

Here is a screenshot of what I have right now. I'd like to get the image of the bulletinboard to be wedged inbetween the two above it. I understand why it is doing this, but I am unsure what I can do to fix it.

<main> 
<div class="main-wrapper-side">
    <h1>RIC CAMPUS STORE</h1>
    <div class="image-link">
        <a href="merchandise.html"><img src="images/Index_Images/cap-and-gown.jpg" alt="Cap & Gown" width="450" height="165"></a>
        <a href="books.html"><img src="images/Index_Images/textbook_pile.jpg" alt="Textbooks" width="100" height="275"></a>
    </div>
    <div class="image-link">
    <a href="information.html"><img src="images/Index_Images/bulletin_board.jpg" alt="Information" width="1300" height="954" align="left"></a>
    </div>

</div>

And my CSS...

/* Start of Index Rules*/
.image-link {
display: flex;
justify-content: space-between;
margin: 0 0px;
}
.image-link a, .image-link img{
margin: 0 0px;
width: 95%;
height: auto;
}

Right now I have my image in a separate <div> section which is why it is placed under the images. When I place it in the same <div> section it goes to the right of both the images and scales them down due to the CSS width being set to 95%

Any help at all would be appreciated. Thanks in advance!