responsive 3 column design using flexbox

I had a hard time using the media query for positioning of the main container. I was really unsure of why the main container would not center once I wrote the media query. On the styling I initially had the body{} set to display: flex ; justify content: center; align-items: center;

Once I used the media query to make the desktop version I had to hack it to make the overall main container display center of the page by using margin: 25vh. I tried using margin: 0 auto as well as using the original html when I set the body. Once you comment out the margin setting below the main container jumps all the way to the top of the screen.

#wrapper{ flex-direction: row; height: 500px; width: 900px; margin: 25vh; }