Hmm, I can’t see anything wrong with your CSS. But it looks like there is an issue with the width of the green area. Also, is top:50% necessary? Could you leave that out and have height: 50%? Just a guess, but setting both top and bottom can sometimes lead to less predictable results.
Also might be worth trying display: block on the main element e.g.