Ankhena

header>div#logo>a>img
Что это? Может от html начинать?

Почему картинка не выравнивается по центру?

Потому что она не блочная.
Ссылка, кстати, тоже. (Наверное. Не видно)

Если правильно понимаю цели
Круг - понятно, border-radius
Крест - 2 фона линейными градиентами

Вот, в один div https://jsfiddle.net/x6t9ay0w/

div {
  width: 150px;
  height: 150px;
  border: 14px solid red;
  border-radius: 50%;
  background: 
linear-gradient(45deg, transparent, transparent 98px, red 99px, red 113px, transparent 114px, transparent),
linear-gradient(-45deg, transparent, transparent 98px, red 99px, red 113px, transparent 114px, transparent);
}

Зачем прибьитым блокам высчитывать top?
Почему просто не задать fixed и top в процентах?

Картину портит блок div id="loginpanel"

1. Откройте свой же пример на jsfiddle и прокрутите html код в самый низ. Вас не смущает, что там теги помечены красным?
Таблица верстается определенным образом. Теги tr должны закрываться.
Браузеры стараются понять, как отображать ошибочный код и что имел в виду верстальщик, но никому не обещали этого делать.
Исправьте верстку, все заработает.

2. Таблицами верстают только табличные данные.

1. На js подменять meta viewport при ширине экрана меньше, чем 380
2. Вариант расчитывать zoom кажется мне менее привлекательным
3. Переверстать нормально - лучший вариант

1. margin-top
2. позиционирование

Дальше - выкладывайте ваш код и говорите, что не получается.

Muxailo:
ладно, погадаем на скринах

специально для вас, сотворила пример из того, что написано у вас в media: https://jsfiddle.net/9nf9bvu4/

margin-left: 76.2%;
transform: translate(-76.2%);

Подвигайте ширину блока с результатом и посмотрите, что будет: при небольшой ширине верхний блок (ваш) уезжает за экран, нижний (мой) остается всегда в центре.
Поэтому, ваш блок уехал.

Ширина окна браузера на вертикально повернутом iphone5 320 точек. Вы же сравниваете эмулятор горизонтально повернутого айфона и реальный вертакально повернутый телефон.
Поэтому, разница в скринах

Откуда взялись эти странные сдвиги на 76,2%? Почему сдвиг влево не равен сдвигу вправо? Какого результата вы пытались этим ходом добиться?

1. градиенты https://webref.ru/css/value/linear-gradient
2. трансформации https://webref.ru/css/transform
3. тени https://webref.ru/css/box-shadow

Вообще, зависит от судьбы блоков при адаптации, может фоновой картинкой будет проще

Потому что кроме "ниже", у селекторов есть специфичность htmlbook.ru/samcss/kaskadirovanie

а есть только такие прямоугольные куски багетов

Я бы склеила их в фотошопе для нормального результата и использовала border-image. А не насиловала бы браузер трансформами и лишними блоками.

Вероятнее всего, как фон градиентом.
Например, вот так https://jsfiddle.net/uk0fuo4h/
Только не понятно что это вообще за блок такой, зачем он? Как будет себя вести? Будет ли в нем контент?

Для <col> допустимо использовать следующие стилевые свойства: border, background, width, visibility. Остальные свойства не оказывают никакого эффекта на элемент.
https://webref.ru/html/col

Количество оберток ужасное.

1. Как его расположить в центре страницы, так чтобы он разъезжался в обе стороны, а не в одну как сейчас.

Вариантов размещение блока посередине масса. Например, при известной ширине, margin:auto, при неизвестной left: 50%; transform: translateX(-50%)
Соответственно при изменении ширины, он разъедется в обе стороны.

2. Как заставить фон блока, медленно, во время раскрытия, окрашиваться в другой цвет?

Меняйте цвет фона https://webref.ru/css/transition