Bootstrap, flexbox, margin

Question

Czołem. Mam mały problem z którym głowie się już kilka godzin i jakoś się kompletnie zawiesiłem. Aktualnie przerabiam sobie kurs MZ JavaScript, i jestem na etapie Memory Game. Przy okazji chciałem potrenować html i css i do tego bootstrap którym w sumie nigdy się nie bawiłem.

To tyle tytułem wstępu. Jeżeli chodzi o mój problem. To tak jak w kodzie widać. Mam header z nagłówkiem z którym jest wszystko ok. Niżej mam kontener w main>section o id BOARD i on ma być miejsce gdzie bedę wyświetlał obrazki. Chciałbym je ustawić używając do tego flex boxa. I wydawało mi się że będzie to proste, już robiłem trochę flexboxem i nigdy tak długo sie nie głowiłem nad problemem.

Chodzi o to że board ustawiłem na max width 1200px. I to działa. Klasa CARD mam ustawioną max-width: 25%; aby zawsze w jednym wierszu były 4 karty. I dopóki nie dam marginesów wszystko jest ok. Jak dam marginesy na 3px to nie chce mi się to zmieścić. Tyle ze daje też przecież box-sizing: border-box... więc powinno działać... ale nie chce :/ Nie mam pojęcia co robię źle i gdzie to robię :) Byłbym wdzięczny za pomoc.

Dodatkowo druga sprawa. Jak zrobić aby obrazek się skalował? W przypadku kiedy daje width: 25%; muszę dać sztywną wysokość co w przypadku telefonu na przykład już będzie złe - bo obrazek będzie za wysoki. height: 300px się sprawdza w przypadku dużego ekranu, chciałbym żeby wysokość też się skalowała. Jak daje auto to nic wysokość się robi 2px.

Mam nadzieje że nie napisałem tego chaotycznie. Jestem w pracy, co chwila ktoś mnie odciąga od kompa i tak piszę jak mam chwilkę :)

HTML:  https://pastebin.com/SVuYCCRH

CSS:  https://pastebin.com/SEbm4u5t

EDIT
Nie wiedziałem że box-sizing: border-box nie obejmuje marginesów :)