i want my header box-shadow covers the top of the body section

Question

I'm building my portfolio for tutorial but i have some problem with

the 'box-shadow' and 'header'. i hope that box-shadow covers the header like the sidebar covers the city image background and i'm sorry careless posting. i will do better in next quetion! THANKS FOR YOUR HELP!!

i still can't attach my image has problem. please follow this link and check my 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

add z-index: 1;

in your .header

and the shadow will appear over everything.