Why do my Google map not adjust according to device screen?

I am facing a problem with Google map div. I divide the #contactus section ‘s row into col-md-6 and col-md-6. One for form and one for Google map. And everything looks fine on Desktop screen. But the problem is when I open my site on the mobile screen; then only Google Map columns behave unexpectedly, It does not remain center. I just want google map in the center , below the form on the mobile screen.

I tried @media queries to adjust its’ width and height according to screen, but nothing worked. Please help me!

Website: https://manpreet9112.github.io/JS-website/home.html

code: https://github.com/manpreet9112/JS-website

Help me!