Excess white space, page width

Question

New here, do let me know if I've posted in wrong place.

I'm making a new website, bit of a hobby, self thought with help of online forums and Google :)

Problem I have is, I've not used much CSS before, but appears this is the best way to style. While visiting a page on a mobile, it seams to be zoomed right out, and have a huge white space down the right hand side. I've looked into several posts online, but cannot seam to get rid of this excess space.

Here is the first part of the file to display this..

    <style type="text/css">
html, body {
    width: 400px;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-x: hidden;
}

main {
    posistion: relative;
    height: auto;
    width: 400px;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    z-index: 0;
}

li a {
    display: block;
    width:80%;
    background:#ddd;
    padding: 0% 0%;
    font-size: 30px;
    text-decoration: none;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}

    #menu {
       position: absolute;
       margin-top: 15px;
       margin-left: 15px;
        width:1.4em;
        display: block;
        background:#ddd;
        font-size:1.35em;
        text-align: center;
        z-index: 1000;
    }

    #nav {
       position: absolute;
       margin-top: 44px;
       margin-left: 15px;
        width: 135px;
        display: block;
        background:#ddd;
        font-size:1.35em;
        text-align: left;
        z-index: 1000;
    }

    #nav.js {
        display: none;
    }

    ul {
       margin-left: 0px;
        width:150px;
        list-style: none;
        z-index: 1000;
    }

    li {
        margin-left: 0px;
        width:auto;
        border-right:none;
        z-index:1000;
    }
</style>

Answer 1

most browsers resize the page to fit but you can prevent that by using the META tag like this.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>