Je veux que mon box-shadow en-tête recouvre la partie supérieure de la section du corps

Question

Je construis mon portefeuille tutoriel mais j'ai un problème avec

la « box-shadow » et « en-tête ». j'espère que box-shadow couvre l'en-tête comme la barre latérale couvre l'arrière-plan de l'image de la ville et je suis désolé annonce négligente. je ferai mieux dans la prochaine quetion! MERCI POUR VOTRE AIDE !!

Je ne peux toujours pas joindre mon image a un problème. s'il vous plaît suivez ce lien et vérifier mon codepen: https://codepen.io/cjddlr1/pen/YNzPmK

<div class="header" style="box-shadow : 0 3px 15px black;"> 
</div> 

<div class="body"> 
    <div class="row"> 
    <div class="col-xs-2" id="sidebar-left"></div> 
    <div class="col-xs-8" id="contents-section"> 
     <div class="row" id="section1"> 
     <div class="col-xs-4" id="myPicCol"> 
      <img src="http://www.sanviator.com/app/images/logoapple.png" alt="logopic.png" id="myPicture"/> 
     </div> 
     <div class="col-xs-8"> 
      <div class="section1"> 
      <h1>Full-Stack Developer</h1> 
      <h3>My name is Chung Ik Yu.</h3> 
      <p>Currently living in Jinju, South Korea.</p> 
      <p>I'm training my front-end web development skills nowadays.</p> 
      <p>my final goal is emigrating to Canada using my skills and Making A lot of Money to help people around me</p> 
      </div> 
     </div> 
     </div> 
     <div class="row" id="section2"> 
     <div class="col-xs-12"> 
      <h2>SKILLS</h2> 
      <ul> 
      <li>HTML/CSS/BOOTSTRAP : LOW-MID</li> 
      <li>PHP : LOW</li> 
      <li>Javascript : MID</li> 
      <li>jQuery : LOW</li> 
      </ul> 
     </div> 
     </div> 
     <div class="row" id="section3"> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-10"> 
      <h1>Contact</h1> 
      <div class="row"> 
      <div class="col-xs-6"> 
       <p>PHONE : 010-xxxx-xxxx</p> 
      </div> 
      <div class="col-xs-6"> 
       <p>E-MAIL : cjddlr1@coldmail.com</p> 
      </div> 
      </div> 
     </div> 
     <div class="col-xs-1"></div> 
     </div> 
    </div> 
    <div class="col-xs-2" id="sidebar-right"></div> 
    </div> 
</div> 

.header{ 
    height :50px; 
    overflow-x : hidden; 
    background-color:gray; 
    position : relative; 
} 
.body { 
    min-height : 100%; 
    overflow-x : hidden; 
    background-image : url('http://calgaryattractions.com/wp-content/uploads/calgary01.jpg'); 
    background-size : cover; 
} 
.footer { 
    position: relative; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 50px; 
    background : gray; 
    box-shadow : 0px -3px 15px black; 
    overflow-x : hidden; 
} 
#myPicCol { 
    align : center; 
} 
#myPicture { 
    height : 205px; 
    display: block; 
    margin-left : 80px; 
} 
#contents-section { 
    background : white; 
} 
#section1 { 
    padding : 30px 0 30px 0; 
} 
#section2 { 
    padding : 30px 0 30px 95px; 
} 
#section2 li { 
    margin-left : -10px; 
} 
#section3 { 
    padding : 30px 0 30px 0; 
} 
#section3 .col-xs-6 { 
    text-align : center; 
} 
#section3 h1 { 
    text-align : center; 
} 
#sidebar-left{ 
} 
#sidebar-right { 
} 
ul { 
    list-style-type: none; 
} 

Answer 1

ajouter z-index: 1;

dans votre .header

et l'ombre apparaîtra sur tout.