Edward

https://jsfiddle.net/dcwshwyv/

<a href="#" class="buy">
<p>Buy</p>
</a>

.buy {
    /* ... */
    display: block;
    text-decoration: none;
}

https://jsfiddle.net/pon8som9/
https://jsfiddle.net/pon8som9/1/

Если это отдельный блок на странице, то сделайте два блока с display:inline-block, задайте им ширину по 50% (или иное соотношение) и вертикальное выравнивание сверху. В один блок поместите список с заголовком, в другой - картинку.

я сделал бы вот так

.holder { overflow:hidden;}
.banner { float:right;}

<div class="holder">
        <div class="banner">
           <img src="../image/banner.png">
        </div>
        <div class="box">
            <h1>Product name</h1>
            <div class="list_h">
                <ul>
                    <li>Put on this page information about your product</li>
                    <li>A detailed description of your product</li>
                    <li>Tell us about the advantages and merits</li>
                    <li>Associate the page with the payment system</li>
                </ul>
            </div>
        </div>
 </div>

h1 блочный элемент, поэтому он занимает всю строчку. Пропишите ему display: inline-block;, чтобы он начал вести себя как блочно-строчный элемент. При необходимости нужно так же указать vertical-align: top;

.ico {
float: left;
}

.clear {
clear: both;
}

После див с классом box добавить сразу:

<div class="clear"></div>

Смысл в том, чтобы задать float:left; 2 элементам, которые предполагаются располагаться рядом, картинке и надписи, чтобы были на одном уровне, а потом отменить обтекание, чтобы не порушить верстку ниже