Ширина в процентах не отцентрирована

У меня небольшая проблема с дизайном, и я не знаю, как ее решить.

body {
	background-color: #000000 !important;
}

#container {
	position: relative;
}

#overlay {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div id = "container">
  <img src = "http://paralyzed.scork.net/img/splasher.png" class = "img-fluid d-block mx-auto" id = "splash" border = "0" />
  <div id = "overlay">
    <img src = "http://paralyzed.scork.net/img/facebook.svg" alt = "Facebook" border = "0" width = "40" />&emsp;
    <img src = "http://paralyzed.scork.net/img/instagram.svg" alt = "Instagram" border = "0" width = "40" />&emsp;
    <img src = "http://paralyzed.scork.net/img/youtube.svg" alt = "YouTube" border = "0" width = "40">
  </div>
</div>

jsfiddle

У меня есть основное изображение, и я хочу наложить на него значки социальных сетей. Все идет нормально. Но я бы хотел, чтобы они реагировали, используя процент как ширину / высоту. Как только я это сделаю, значки социальных сетей больше не будут по центру, они будут перемещаться влево.

Есть идеи, как это решить? Я работал над этим несколько часов и пробовал много вариантов, но у меня ничего не работало.

Моя цель - сделать значки большего размера на рабочем столе и меньшего размера на мобильных устройствах.

Добро пожаловать в Stack Overflow! Привет спасибо ... считаются шумом;

— 06.07.2018 12:58

stackoverflow.blog/2014/09/16/…

— 06.07.2018 12:59

html css

06.07.2018 12:21

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изменил эти стили

    #container {
      position: relative;
      width: 100%;
    }

    img.abc {
      width: 100%;
    }

    #overlay {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  width :100%;
  text-align: center;
}

См. Обновленный рабочий пример

body {
	background-color: #000000 !important;
}

#container {
	position: relative;
	width: 100%;
}

#overlay {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
  width :100%;
  text-align: center;
}
.bg-image {
  width: 100%;
}
#overlay-image {
	width: 10%;
}

		<div id = "container">
			<img src = "http://paralyzed.scork.net/img/splasher.png" class = "img-fluid d-block mx-auto bg-image" id = "splash" border = "0" />
			<div id = "overlay">
				<img src = "http://paralyzed.scork.net/img/facebook.svg" alt = "Facebook" border = "0" id = "overlay-image" />&emsp;
				<img src = "http://paralyzed.scork.net/img/instagram.svg" alt = "Instagram" border = "0" id = "overlay-image" />&emsp;
				<img src = "http://paralyzed.scork.net/img/youtube.svg" alt = "YouTube" border = "0" id = "overlay-image" />
			</div>
		</div>

Хорошо, но когда я сейчас использую проценты на изображениях, они не центрированы (возможно, я не смог правильно объяснить свою проблему :) Я обновил свою скрипку с моей проблемой и теперь нецентрированные значки jsfiddle.net/3obft6q8/8

— 06.07.2018 13:01

Да, точно. Спасибо, вы сэкономили мне много нервов. Я просто снова удалил .bg-изображение, потому что я не хочу, чтобы он был на 100% на рабочем столе. Но другие изменения сделали это за меня.

— 06.07.2018 13:14

06.07.2018 12:26