Alguns itens da minha página estão em cima do header

Front-end
, ,
#1

Eu sou novo na programação, mas estou construindo um pequeno site, o problema é que eu consegui um código de gráfico de progresso circular pra implantar no meu site, consegui colocá-lo sem problemas, porém quando o meu header que está com position fixed passa por eles, ao invés dos gráficos ficarem embaixo, eles ficam em cima do header.
Esse é o código do gráfico:

.area{    
    justify-content: center;
    padding: 10px;
  }
.percent {
  font-weight: bold;
  font-family: Abel;
}

.chart{
    position: relative;
    width:75px;
    height:75px;
    
    border-radius: 50%;
    background-color: #4d2765;
    
    overflow:hidden;
}

.chart .radio_chart{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    
    position:absolute;
}
.chart .radio_chart.animate{
    animation-name: circled;
    animation-duration: 1s;
    animation-timing-function: linear;
    -moz-animation-name: circled;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -webkit-animation-name: circled;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    background: #b63450;
}
.chart .cap{
    border-top: #fff 3px solid;
    border-left: #fff 2px solid;
    position:absolute;
    width: 100%;
    height: 100%;
    
    transform: scale(.8);
    
    background-color: #fff;
    margin: 0 auto;
    border-radius:50%;
    
    box-shadow: 2px 2px 10px rgba(0,0,0,.5);
  }
  
  .chart .value{
    color: black;
    width:100%;
    height:100%;
    text-align: center;
    font-size:100%;
    top:37.5%;  
    
    position:absolute;
  
    
  }

  @keyframes circled {
    0%   {
       clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
    }
    100% {
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
    }
}
@-webkit-keyframes circled {
    0%   {
       -webkit-clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
    }
    100% {
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
    }
}
@-moz-keyframes circled {
    0%   {
       clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
    }
    50%{
       clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
    }
    75%  {
       clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
    }
    100% {
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
    }
}

A parte html é esta:

<link rel="stylesheet" href="graphs/graph.css">
<div class="area">
    <!--This is the Structure of your chart-->
    <div class="chart">
        <div class="radio_chart" id="radioChartContent-nat">
        </div>
        <div class="cap">
        </div>
        <div class="value" id="percentValue-nat">
        <div class="percent">0%</div>
        </div>
    </div>
</div>
<script src="graphs/graph-nat.js"></script>

E o java script:

goToNat(0)


function goToNat(frame){
	reset(); // Just reset
	
  //For some reason Javascript needs a time to remove animate class. I tried to use as callback from reset but it just didnt work. 
  setTimeout(function(){
  	//Get components
    var chart = document.getElementById("radioChartContent-nat"), pVal = document.getElementById("percentValue-nat");

		//Add animate
    chart.classList.add("animate");

    var currentPercent = 0; //Initial percentage

		//Get percentage one by one
    var currTimeout = setInterval(function(){
    	//Check is reach the limit
      if(currentPercent == frame || currentPercent > 100){
      		
          //Clear interval
          clearInterval(currTimeout);
          //Pause animation
          chart.style.animationPlayState = "paused";
          chart.style.webkitAnimationPlayState = "paused"; //if webkit
          
          return false;
        }else{
        	//Sum percentage
          currentPercent++;
          //show new percentage
          pVal.innerHTML = "<div class='percent'>" + currentPercent+"%</div>";
        }
    }, 10); //We are using 10 cause it reference by a 1 second (1000 miliseconds) animation. If you're using 4 seconds, change to 40 as  example
  },100);
}

//Reset to initial position
function reset(){
	var chart = document.getElementById("radioChartContent-nat"), pVal = document.getElementById("percentValue-nat");
  
  chart.classList.remove("animate");
  pVal.innerHTML = "<div class='percent'>0%</div>";
  chart.style.animationPlayState = "initial";
  chart.style.webkitAnimationPlayState = "initial"; //if webkit
}

Além disso só incluir ele na meu index com php include.

O header:

<div class="header">
        <div class='headerMain'>
            <img src="app/src/images/logo-header.png" alt="Athenados">
        </div>
    </div>

E o css do header:

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;  
    box-shadow: 0 2px 3px #000;  
}
.headerMain {
    height: 100px;
    background-color: #b63450;
    text-align: center;            
}
.headerMain img {
    width: 45%;
    margin: 10px;                                  
}
#2

Se sua ideia é manter uma cabeçalho sempre no topo enquanto o usuário vai rolando a página, utilize o position: sticky :

.header {
    position: -webkit-sticky;
    position: sticky;
}

O problema é a compatibilidade com os famigerados IE/Edge da vida.

Caso ainda queira usar o position: fixed, creio que você possa contornar adicionando um elemento anterior a sua área útil que tenha o mesmo tamanho do header ou algo assim.