Hi refrakted and welcome to SitePoint
What you're using is correct.
I think the problem is with your container which has a fixed width: 800px;
Change it to 100%.
If you want everything to work on smart phones, you'll need to apply flexible layouts, or at least override your fixed desktop widths using the below.
I personally load a separate style sheet once the device width is detected (the below will cover iphone portrait and landscape):
<link rel="stylesheet" media="screen and (min-width : 320px) and (max-width: 480px)" href="css/smartphone.css">
Hope this helps,