css が使えない。

wordpress初心者です。

ページにサムネを横に４個、それを縦に３列並べたいので下記のように書きました。
思ったように横に４個、それが縦に３列サムネを並べる事に成功したのですが、サムネ同士の幅を調節できません。cssのdiv.box {margin-left: 20px}が効いていないようです。
何が間違っているのか、調べたりしたのですがよくわかりません。
初歩的な事だと申し訳ないのですが、教えていただけませんでしょうか。よろしくお願いします。

ちなみにcssのboxの部分を削除し、indexの
<a href="<?php the_permalink(); ?>" >
を
<a href="<?php the_permalink(); ?>"style="margin-left:10px;">
と変更した所、横幅の調節はできたのですが、
margin-top、もしくはbottomにすると変化がありませんでした。

index.php

<div class="box">
　　<?php query_posts( 'category_name=AAA&posts_per_page=12' );　?>
         <?php if (have_posts()) : ?>
             <?php while (have_posts()): ?>
              <?php the_post(); ?>
              <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('my_thumbnail'); ?></a>
             <?php endwhile; ?>
        <?php endif; ?>
      <?php wp_reset_query(); ?>
</div>

style.css

/*　コンテナ　*/
div#container {width: 1080px;
               margin:auto}

/*　コンテンツ　*/
div#content   {width: 820px;
               float: left}

/*  記事のサムネ */
div.box    {margin-left: 20px}

/* サイドバー */
div#sidebar   {width: 260px;
               float:right}

functions.php

<?
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
};

add_image_size( 'my_thumbnail', 180, 135, true );

?>