on your current pen, you can set margin 0; on the figure as its getting quite a lot as standard, then you can text-align: center also the figure tag and it will center the image inside it. Problem before was image was flowing outside figure tag, and a solution to that could be having max-width: 100%; on the image.
Just thought I would add that so you can get an idea for how yours could be fixed as well.
I also just noticed you were targeting div.figure which would be targeting this:
whereas you needed to target as div figure to get the figure tag inside a div tag
attached an updated pen for you. hopefully that helps your understanding a bit too.