How does negative margins work

I want half the grey column to be in the blue area and want the column to also extend beyond the bottom boundary of the grid. I used margin-block: -50% but it doesn't work. Why is it not working and what's the right way to do it? https://codepen.io/ksblupzi-the-solid/pen/qEbNQVN
Was this page helpful?