I'd like to have a div, which contains:

* Text on the top
* Some image below it

How I may make it? Here's what I did so far

```css
.container {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 180pt;
  border: 1px solid red;
}

.text {
  width: 12%;
  height: 180px;
  text-align: left;
  background-color: yellow;
  margin: 20px;
}

.text p {
  font-size: 20px;
  margin-left: 0 auto;
  margin-right: 0 auto;
  margin-top: 15px;
  text-align: center;
}

.image {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url("url_to_img");
  background-size: cover;
  background-repeat: no-repeat;
}
```

```html
<div class="container">
  <div class="text">
    <p>Lorem</p>
    <div class="image"></div>
  </div>
</div>
```

For now, the `<p>` is working just fine, but I have struggle with the image it's sticking out the borders of container div.