記事中の画像の回り込みが反映されません

いつもお世話になっています。
基本的なCSSに関する質問で大変お恥ずかしいのですが、ワードプレス記事本文に以下のHTMLを記述し、CSSでレイアウトしたいのですが反映されず困っています。
使用しているテーマはtwentytwelveです。

<div class="bookimg"><img src="〇〇〇"></div>
<div class="book-list">
<ul class="book-ul">
	<li>〇〇〇</li>
	<li>〇〇〇</li>
	<li>〇〇〇</li>
</ul>
</div>

div.bookimg
{
float:left;
}

ul.book-ul
{
width:400px;
}

ul.book-ul li{
list-style-type:none;
font-size:13px;
border-bottom:1px dashed #CCCCCC;
margin-bottom:5px;
}

イメージとしては画像の右隣にリストを表示させたいと思っています。
記事編集画面の”ビジュアル”の部分で画像の回り込みをしてもよいのですが、
その方法を取ると、リストのmarginが反映されず、画像の横にぴったりくっついた状態になってしまいます。

ご回答どうぞよろしくお願いします。