mr jeery

Для асинхронных запросов следует использовать redux middleware, например redux-thunk:

import { fetchInitialDataApi } from './api';

const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_ERROR = 'FETCH_DATA_ERROR';

const fetchDataRequest = () => ({ type:  FETCH_DATA_REQUEST });

const fetchDataSuccess = data => ({
  type:  FETCH_DATA_SUCCES,
  payload: data,
});

const fetchDataError = error => ({
  type:  FETCH_DATA_ERROR,
  payload: error,
});

const fetchData => async dispatch => {
  try {
    dispatch(fetchDataRequest());
    const { data } = await fetchDataApi();
    dispatch(fetchDataSuccess(data));
  } catch error {
    dispatch(fetchDataError(error));
  }
};

const initialState = {
  data: {},
  isLoading: false,
  isError: false,
  error: null,
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case FETCH_DATA_REQUEST:
      return {
        ...state,
        isLoading: true,
        isError: false,
        error: null,
      };
    case FETCH__DATA_SUCCESS:
      return {
        ...state,
        data: payload,
        isLoading: false,
      };
    case FETCH_DATA_ERROR:
      return {
        ...state,
        isLoading: false,
        isError: true,
        error: payload,
      };
  default:
    return state;
  }
}

Потому что у вас ссылка на логотип является непосредственным флекс-элементом. Поместите эту ссылку внутрь логотипа.

так а вы не тому элементу присваиваете этот класс. если в общих чертах, то правильный варинт будет примерно такой:

<header>

<a href="main.html" class="logo">
		<div>
	
					<div class="logotype">
				 			<img src="logo3.jpg" id="logojpg">
					</div>

					<div class="companyname">
						<p>ALEXANDER SHNEYDMILLER </p>
					</div>

		</div>
</a>

		
			<!--МЕНЮ САЙТА -->
			<div class="list-menu">
				<div class="nav-toggle"><span></span></div>
				<ul id="menu">
					<li><a href="main.html#b"> Галерея</a></li>
					<li><a href="#a">Контакты</a></li>
					<li><a href="#a">Обо мне</a></li>
				</ul>
			</div>
</header>

т.е. перемеcтите класс logo на уровень выше и все будет.

Разница в состоит в том, что перенос строки является символом, а это значит что в дочерних узлах появится текст, а значит что ссылки

var overlay = this.childNodes[1];
var image = this.childNodes[0];

будут неверными, а следовательно ваша анимация работать не будет. В таком случае просто ищите элемент внутри элемента, вместо поиска узла. Попробуйте отладить код прежде, чем писать свой вопрос, отладка наша все

https://codepen.io/prodavecmacdonalds/pen/GyoKYQ?e...

у них так работает

.overlay-2 .fluidbox__overlay {
    background-color: transparent;
    background-image: linear-gradient(to top left,rgba(130,168,158,.85),rgba(134,150,173,.85));
}

<a href="http://i.imgur.com/keuMHNt.jpg" class="col-2 overlay-2 fluidbox__instance-20 fluidbox--initialized fluidbox--ready fluidbox--opened fluidbox--loaded">

... здесь картинка и затемнение :
<div class="fluidbox__overlay" style="z-index: -1; opacity: 1;"></div>

</a>

Если Вы используете bootstrap 4, то в разметке уже предусмотрены нулевые отступы, для этого вместе с классом .row используют класс .no-gutters

Пример:

<div class="row no-gutters">
  <div class="col-12 col-md-8">.col-12  .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Когда я выставляю нулевые значения, то мои строки игнорируются. Не понимаю в чем дело

Подозреваю, что дело в том, что стиль который пишите Вы находится на странице выше, чем тот стиль, который задаёт отступы.

Варианта решения:
1. Подключить Ваш стиль после того стиля, который задаёт отступы
2. Использовать !important
3. Написать более длинный/"точный" селектор, например: header .col-md-6 { ... }

У тебя стили бутстраповские подтягиваются для класса .container-fluid. Задай ему padding нулевой.
Так же свои стили подключай после посторонних и не забывай о приоритетах. Напиши header .col-md-6 {...}

Да никакой особенной технологии нет, это просто заранее просчитанная сетка, статичная. Скорее всего на PHP в цикле прогоняются все итемы и выстраиваются в нужные пропорции простой проверкой на четность или номер ряда. У широкой фотки класс rk-size-12, у узкой rk-size-6, потом когда две фотки в колонке, то самая обычная вложенность идет. Вообщем ничего особенного и пишется за час.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/