Centre Responsive Navigation Icons

Is anybody able to help? Struggling to centre these icons and make them responsive to the width of the screen. I am trying to get these icons to come closer as the screens width is changed I've been trying to give the margins a '%' "as you can see by my code" so that they would shrink with the width and come closer to each other but it really is not coming out the way i was expecting it to! This seems simple but i cant cant get! cheers guys

html, body {
	background-color:#B0B0B0;
	margin:0;
	padding:0;
	font-family: sans-serif;
	color: black;	
}
html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
.navigationbar {
	height: 70px;
	width: 100%;
	background: black;
	border-bottom: solid 10px #1BD2E1;
	color: white;
	
}
#content {
	position: absolute;
	background-color: white;
	width: 800px;
	height: 100%;
	margin: auto;
  top: 300px; left: 0; bottom: 0; right: 0;
	
}
.logo-container{
		display: block;
	position: relative;
left: 20%;
	width: 90%;
}
.blockicon {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;	
	top: 45px;
	background:#A81D1F;
	border-radius: 15%;
	cursor: pointer;
	float: left;
	margin-left: 3%;
}

<div class="navigationbar">
<div class="logo-container" >
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
</div></div>
<div id="content">
</div>