Коробка тень на элементе списка

Question

У меня проблема с отображением тень теней на моем элементе списка. Я нашел некоторые ответы на подобные вопросы, но ни один из них не помог мне в моем случае. Я пытаюсь получить тень справа и внизу моего элемента списка, например, в первом примере на этой странице http://css-tricks.com/snippets/css/css-box-shadow/. Вот мой список:

<ul id="BrosureLista"> 
    <li> 
     <div class="BrosureListSlika"> 
      <img src="/images/Brosure01.jpg"> 
      <div class="BrosureListSlikaNaslov"> 
       <div> 
        <h1>CL</h1> 
        <h2>2013</h2> 
       </div> 
      </div> 
     </div> 
     <div class="BrosureListNaslov"> 
      <h2>CL 2013</h2> 
      <p>vodič za hedoniste</p> 
     </div> 
     <div class="BrosureListDownload"> 
      <a href="#"><p>Download</p>      
      <img src="/images/Download.png"></a> 
     </div> 
     <div class="clear"></div> 
    </li> 
</ul> 

Ande здесь CSS для моего списка:

#BrosureLista{ 
    position:relative; 
    width:100%; 
    text-align:left; 
} 
#BrosureLista li{ 
    position:relative; 
    width:100%; 
    list-style:none; 
    display:block; 
    padding:50px 0; 
    overflow:visible; 
    -moz-box-shadow: 2px 3px 2px grey; 
    -webkit-box-shadow: 2px 3px 2px grey; 
    box-shadow: 2px 3px 2px grey; 
} 

Спасибо за помощь!

Answer 1

вы отдаете своей ли 100% ширине. ваша правая тень выходит за пределы экрана. попробуйте дать меньше ширины - mayby ​​95-97%?