I am attempting to tile a webpage with `div` elements of various sizes. However, I am running into an issue with once `x` number of `div` elements have filled the width of the screen the following `div` is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' `div` to be floated to fit into the space above where it is currently positioned.

```css
h1 {
 color: white;
}

.center {
 display: flex;
 justify-content: center;
 align-items: center; 
 text-align: center;
}

.container {
 display: inline-block;
}

.default {
 margin: 1em;
 float: left;
}

/* For hover text */
.hover_img {
 width: 100%;
 height: 100%;
 position: relative;
 float: left;
}

.hover_img h4 {
 color: white;
}

.hover_img:hover img {
 opacity: .2;
}

.hover_img:hover .center_text {
 display: block;
}

.center_text {
 position: absolute;
 top: 50%;
 left: 0;
 display: none;
 font-weight: bold;
 text-align: center;
}

img {
 margin: 0;
}

.rectangle-tile-horizontal {
 height: 15em;
 width: 35em;
}

.red {
 background-color: rgba(255, 63, 63, 0.8);
}

#game, #game img {
 width: 30em;
 height: 30em;
}

#app, #app img {
 width: 40em;
 height: 35em;
}
```

```html
  <div class="container">
   <div class="rectangle-tile-horizontal red center default">
    <h1><b>Projects</b></h1>
   </div>

   <div class="rectangle-tile-horizontal hover_img default" id="app">
    <img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
    <div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Web App</a></h4></div>
   </div>

   <div class="hover_img default" id="game">
    <img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
    <div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Breakout</a></h4> </div>
</div>
```