Блоки мешают друг другу, как исправить?
Если это отдельный блок на странице, то сделайте два блока с 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>