codepen.io/ElenaDroueva/pen/mewjJg
height, исправьте на min-height и добавьте padding: 32px 5px 5px; 
.logo {
position: absolute;
left: calc(50% - .6em);
background: #000;
font-size: 4em;
width: 1.2em;
text-align: center;
}
<body>
<div class='square-top'></div>
<div class='triangle-border'></div>
<div class='square-bottom'></div>
</body>body{
width:500px;
margin: 0 auto;
background-color: red;
}
.square-top{
background-color:white;
height:100px;
}
.triangle-border{
border-left: 250px solid blue;
border-right: 250px solid green;
border-top: 20px solid blue;
border-bottom: 20px solid green;
}
.square-bottom{
background-color:black;
height:100px
}
.container{ background: #fff; }
.wrapper-footer{ margin-top: -60px; }
$(document).ready(function(){
$('.wrapper-main').css('z-index',999);
});