Margin auto and max width issue on mobile devices

I have set the max width to 500px and margin 10% auto for centering the container, it loads perfectly on a web browser when i scale down the width of the browser..

However when i run this code on an actual mobile device this is what happens..

The container shrink downs with the contents in it and i also get unnecessary margin on the left and the right...

please review the code here: https://github.com/swizzx/To-Do-List

Help would be really appreciated!

Thanks in advance!