I'm trying to get something like this[the last element at the bottom of the footer](https://i.stack.imgur.com/DJYjy.png)][1](https://i.stack.imgur.com/DJYjy.png)
and instead i'm getting this : [![the link doesn't fit in the footer](https://i.stack.imgur.com/lXazk.png)](https://i.stack.imgur.com/lXazk.png)

```
<footer>
<div class="container-fluid">
  <div class="row">

    <div class="col-md-3 col-sm-3 pad">
      <img src="img/footer.png" class="img_footer img-responsive" alt="" />
    </div>
      <div class="col-md-9 col-sm-9">
        <div class="row test">
          <div class="col-md-8 col-lg-8">
            <p class="apropos text-justify">A Propos</p>

            <p class="text_footer text-justify">Créée en zzrklzkrjzqlqzjflq zedokq zd^q zcw qsmldkqzmdk qzmdpzqùdp qzmdkqzmdkzqmdkqmz lqmzkmqqkzmdqmkzdqmqmqmqzkmzqzdkmqzdqodzmoz</p>
          </div>
            <div class="col-md-4 col-sm-4">
              <!-- <div class="arrow_footer"> -->
                <a href="contact.html" class="arrow_footer">Nous contacter<i class="icon-right-circle"></i></a>
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>

```

Here's the CSS :

```
footer
 {
 width:100%;
 height:100%;
 background-color: #009900;
 }

.test
{
 position: relative;
}
.img_footer
{
 height:100%;
}
.apropos, .text_footer, .arrow_footer
{
  color:white;
}
.apropos
{
 font-weight: bold;
 font-size: 28px;
 text-transform: uppercase;
}
.pad
{
 padding:0;
}
.arrow_footer
{
 position: absolute;
  bottom:0;
  right:0;
  z-index:3;
  font-weight:500;
  font-size:24px;
  text-transform: uppercase;
  text-decoration: none;
  }
  .contact_text
  {
   text-decoration: none;

   }
  .text_footer
  {
   margin-top:50px;
  }

```

Sorry I'm learning so the code is still a little bit messy. I tried also with by putting the container (footer in display flex and playing with align-items but didn't work neither).
Someone could help me to understand ?
Thanks guys.