Flexbox Column, Pure CSS, background blending mode

avoid using pixel values for sizing the elements, use relative values such as vh,vw, %, em,rem

link for relative units : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

if you update the following values your .row container will be exactly centered on the screen :

1. body element :

a ) remove these properties align-items: center; align-content: center;

these properties don't have any effect in your code since they work only when you have set the element to display:flex

 b) set height to 100%
 c) lastly set flex properties to center the content 

this is what it would look like if you update body element as above :

body { background-color: hsl(233, 47%, 7%); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

1. .row container - a) remove margin and padding b) update width to 65%

this is what it would look like if you update .row conatiner as above :

.row{ display: flex; align-items: center; align-content: center; width: 65%; }

And if you are struggling to understand flexbox , play this flexbox zombie game by mastery games. It helped me alot to understand flexbox

link: https://mastery.games/flexboxzombies/