Segunda Imagem (beneficios.jpg)

Uma dúvida...

A imagem 'beneficios.jpg' que fiz download durante o curso está abaixo da lista, ela não está ao lado. Baixei o arquivo com o código completo do curso e comparei com o meu, está igual. Também direcionei o html para apontar para o arquivo .css que baixei do curso e mesmo assim a imagem ficou em baixo da lista e não ao lado. Sabem o que pode ter acontecido ?

body {

}

#banner {
    width:100%;
}

.principal{
    background: #CCCCCC;
    padding: 30px;
}

.titulo-principal {
    padding-left: 20px;
}

.titulo-centralizado {
    text-align: center
}

p {
    text-align: center;
}

#missao {
    font-size: 20px
}

em strong {
    color: #FF0000;
}

.itens {
    font-style: italic
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.imagembeneficios {
    width: 50%;
}