CSS框阴影-不在底部工作

我使用下面的代码，希望div类“certificate”的右下方有一个方框阴影。它只显示在右边-请对我应该如何修改此代码提出任何建议？我已经尝试了我能想到的一切，任何建议都将不胜感激。多谢各位

    <?php
    get_header(); ?>

    <?php
    //create full width template
    kleo_switch_layout('full');
    ?>

    <?php get_template_part('page-parts/general-before-wrap'); ?>

    <?php get_template_part( 'page-parts/page-title' ); ?>
    <!-- <div class="main-content <?php echo Kleo::get_config('container_class'); ?>"> -->

    <!-- chelsea put your stuff below here -->
    <div class="certificate" style="width:80%;margin:auto;border: 1px solid;padding: 10px; box-shadow: 5px 5px 10px grey; z-index: 10;">    
        <center><h1 style="font-family:verdana;" color="black"><b>Digital Badge Certificate</b></h1></center>
        <center><p style="margin-bottom:0;">Congratulations</p></center>
        <center><h2 style="margin-top:0;margin-bottom:0;"><b><i>
                    <?php global $current_user;
                    wp_get_current_user();
                    echo $current_user->display_name
                    ?> </i></b></h2></center>
        <center><p style="margin-top:0;">You have earned the following badges:</p></center>

    <!-- test code for listing badge icons-->

         <?php
               if ( is_user_logged_in () ) {
                  $achievements = badgeos_get_user_achievements();

                        if ( !empty( $achievements ) ) {
                             foreach ( $achievements as $achievement ) {
                                echo '<div style="width:150px;height:150px;display:inline;padding-right: 20px;padding-bottom: 10px" class="badge-list">';
                                echo get_the_post_thumbnail( $achievement->ID, array(150,150) );
                                // echo get_the_post_thumbnail( $achievement->ID, 'thumbnail' );
                                echo '</div>';       
                                }
                            }

                                else {
                                _e( 'No achievements to display', 'text-domain' );
                                }
                 }
       ?>

</div><!-- end of certificate div -->
<!--cheslea put your stuff above here -->


<!-- Wordpress begins - don't put anything below here------------------- -->

  <?php get_template_part('page-parts/general-after-wrap'); ?>

<?php get_footer(); ?>

数字徽章证书
祝贺您

您已获得以下徽章：

使用生成器：。另外，如果出现css问题，请发布呈现的html而不是php-这有助于创建一个额外的

中心
标记已过时，不应使用-改用css：
b
和
i
标记的含义已发生变化-您可能希望改用
strong
和
em
即使@Pete是对的，您当前的基本HTML正在按预期工作（这意味着框阴影渲染良好）。您确定您的
.certificate
div没有嵌套在另一个容器中，例如，该容器具有
溢出：隐藏的
？