Flex — выравнивание. Как добиться одинакового результата в обоих flex-контейнерах?
Потому что в первом контейнере у вас первые 2 элемента по 25% + отступ 20px справа.
А во втором контейнере первый элемент занимает 50% но у него отсутствуют первые 20px.
Получается 
(25% + 20px-отступ)  + (25% + 20px-отступ)
(50% + 20px-отступ)
Там короче выпадает 10px.
Вы не правильно построили структуру. Посмотрите как это делает например bootstrap 4
https://getbootstrap.com/docs/4.4/layout/grid/
А вообще я бы в этой ситуации воспользовался display:grid
Использовать колонки с внутренним отступом вместо внешнего.
И не надо будет заморачиваться с calc()

snippet