Тигран Абрамян

Как вариант.

<ul class="submenu">
  <div class="submenu-items">
    <li><a href="#">Аудио</a></li>
    <li><a href="#">Видео</a></li>
  </div>
</ul>

.submenu-items {
  display: flex;
  flex-direction: row;
}

.submenu li{
  display: inline-block; // убираем
}

Если текст и точка в одном диве или в одном li то им задайте.

display: flex;
justify-content: center;
align-items: center;

Или же скорее всего у них отступы, уберите их с помощью.

margin: 0;
padding: 0;

Переписал ваш код, вы конструкцию не правильно собрали, вот и не получилось растянуть на всю ширину, стилизуйте.
https://jsfiddle.net/r9abd78p/

https://codepen.io/mirandalwashburn/pen/wZmZLz

@media (max-width: 992px) {
  .element {
    display: none;
  }
}

Медиа запросы.

JSFiddle

Как выбрать один элемент, через псевдокласс nth-child?

li:nth-child(5) {
  margin: 0;
  padding: 0;
}

Засуньте их в div назначайте класс например icons и этому классу задайте

.icons {
  display: flex;
  align-items: center;
  flex-direction: row;
}

Либо так

.modal-map img {
  width: 100%;
}

Либо убираем imgи ставим через background-image