List and image on one row appear to be warpping [bootstrap]

I want to have a list and an image side by side in one row on my webpage. I feel like I have made some errors with bootstrap because the list is ending up below the image (maybe because they take up too much space- I don't think I have too many columns and it is wrapping)

Any suggestions woould be appreciated.

Thanks

HTML

<div class="row">
            <div class="col-xs-3">
              <img class="image-two image-border" src="http://ift.tt/2ycngVA" alt="Me and Ami laughing together" /> 
            </div>
       </div>


            <!-- list of reasons I love Ami here -->
            <div class="row">
              <div class="col-xs-5 list-background">
              <p> Reasons I love her: </p>
                <ul> She is filled with love </ul>
                <ul> Her beautiful eyes </ul>
                <ul> Her lust for life </ul>
                <ul> The way she loves me </ul>


    </div>
</div>

CSS

.image-two 
{
max-width:40%;
max-height:40%;
}

.image-border {
padding:2px;
border:1px solid #021a40;
background-color: #0000ff;
}

.list-background{
display: inline-block;
background-color: yellow;
text-align: left;
border: solid;
border-radius: 25px;
max-width: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
padding-bottom: 0px;