Как установить внутренний DIV внутри внешнего DIV

Question

HTML:

<div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> 
    <section class="notif notif-warn"> 
     <h6 class="notif-title">Warning!</h6> 
     <p>This task was forced checked out by another user. Your changes will not be saved Site.Master.</p> 
     <div class="notif-controls"> 
      <a href="#" class="notif-close" id="cBtn">Close</a> 
     </div> 
    </section> 
</div> 

JSFIDDLE: http://jsfiddle.net/sikni8/kb2r6d4c/1/

Как я могу обновить свой CSS, чтобы обеспечить внутренний DIV помещается внутри внешнего DIV с футляром тени.

Answer 1

Вы можете добавить box-sizing: border-box; в ваш класс .notif или удалить 100% ширину.

Проблема в том, что когда вы добавляете 100% ширину + добавление к элементу, это вызовет переполнение.

Answer 2

Удалить ширину от .notif:

.notif { 
    width: 100%; 
}