skúšal som a nič, tak som skúsil debugovať, zrejme to budem musieť mať cez border, kedže shadow sa zobrazuje o práve tých 2px posunuté smerom von od elementu, problém je že tam sú už iné elementy s vyšším z-index. Mainu vyšší Z-index nemôžem nastaviť, lebo pri scrollovaní by sa nescrolloval pod tie elementy ale nad tými elementami. Když tam doplním CSS:

    width: 1003px; // vypočítaná veľkosť - 2* šírka "okraju".
    left: 4px;
    position: relative;

skrz chrome konzoli, pričom vypočítaná CSS veľkosť bola 1011px. Tak sa správne zobrazia tie okraje, problém je že ja dopredu neznám vypočítanú veľkosť, a teda pri zmene veľkosti viewportu, pri zoomu či zmenení veľkosti písma alebo v prípade viac obsahu než sa zmestí do viewportu a teda vykreslenia obsahu tak že je nutno scrollovať, tak celé toto jde do kytek a žádne okraje nemám, alebo naopak mám okraj niekde v polovici elementu.

Teda potrebujem ten "okraj" vykresliť tak aby z vnútornej strany okraju elementu nie z vonkajšej strany okraju.

V prípade borderu když mám len jednofarebný okraj tak mi to funguje presne jak potrebujem, len práve že ja bych chcel vytvoriť dvojfarebný okraj...