У каждого элемента на одной и той же позиции при изменении размера

Question

У меня следующий дизайн, который выглядит как левая версия в 1920x1080. Когда я изменяю размер окна, я хочу, чтобы дизайн выглядел в точности как «огромная» версия. Таким образом, не только фон, который масштабируется (с «обложкой»), и изображения, которые масштабируются, когда места больше нет («ширина: 100%»), но каждый элемент масштабируется немедленно, и дизайн всегда выглядит «одинаково».

Главное / причина в том, что синий фон. Он имеет прозрачные края вокруг желтых предметов. Теперь, когда я изменяю размер, элементы не всегда попадают в «одно и то же место», поэтому прозрачные «слоты» больше не совпадают.

Также теперь, когда я изменяю размер окна, части желтой "полосы" перемещаются в два ряда и т. Д. Обратите внимание, что под изменением размера я подразумеваю изменение размера с тем же соотношением сторон (1920x1080 -> 1024x576 и т. Д.).

Вот оно в действии: https://codepen.io/sigug/full/wjeavE/

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #fd1dfa;

}

@keyframes move_header {
    from { top: -200px; }
    to { top: 0px; }
}

@keyframes move_footer {
    from { bottom: -200px; }
    to { bottom: 0px; }
}

#header {
	position: fixed;
	top: 0px;
	width: 100%; 
	height: 200px;

	background: url(https://preview.ibb.co/b3u2b7/background_header.png) repeat-x center top, linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
	background-size: cover;

	animation-name: move_header;
    animation-duration: 1.8s;
		text-align: center;
}

#footer {
	position: fixed;
	bottom: 0px;
	width: 100%; 
	height: 200px;

	background: url(https://preview.ibb.co/i6jPpS/background_footer.png) repeat-x center bottom, linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
	background-size: cover;

	animation-name: move_footer;
    animation-duration: 2s;
	text-align: center;
}



img {	width: 100%;
	height: auto;}

#header #bar {
	position: relative;
	top: 115px;
}

#footer #bar {
	position: relative;
	top: 15px;
}

#header #line_left {
	display: inline-block;

	width: 40%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/header_line_left.png) repeat-x left center;
}

#header #icons {
	display: inline-block;
  	margin: auto auto;

	max-width: 200px;
	text-align: center;
}

#header #line_right {
	display: inline-block;

	width: 40%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/header_line_right.png) repeat-x right center;
}


#footer #line_left {
	display: inline-block;

	width: 30%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/footer_line_left.png) repeat-x left center;
}

#footer #icons {
	display: inline-block;
  	margin: auto auto;

	max-width: 900px;
	text-align: center;
}

#footer #line_right {
	display: inline-block;

	width: 30%;
	height: 10px;
	background: url(https://image.ibb.co/kgLVUS/footer_line_right.png) repeat-x right center;
}


#footer li, #header li {
	list-style-type: none;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.7;
}

#footer li:hover {
	opacity: 1;
}

#footer li .left {
	max-width: 50px;
}

#footer li .space {
	max-width: 20px;
}

#footer li .center {
	max-width: 70px;
}

#footer li .right {
	max-width: 50px;
}

#header li .center {
	max-width: 70px;
}

<div id="header">
	<div id="bar">
		<div id="line_left"></div>
		<div id="icons">
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
		</div>
		<div id="line_right"></div>
	</div>
</div>


<div id="footer">
	<div id="bar">
		<div id="line_left"></div>
		<div id="icons">
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="left"></li>

			<li><img src="https://image.ibb.co/gocNb7/blank.png" class="space"></li>

			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="center"></li>

			<li><img src="https://image.ibb.co/gocNb7/blank.png" class="space"></li>

			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
			<li><img src="https://image.ibb.co/ewR4pS/icon_temp.png" class="right"></li>
		</div>
		<div id="line_right"></div>
	</div>
</div>