Ciao a tutti!
A scopo didattico sto realizzando un semplice sito che contenga delle gallerie di oggetti (in questo caso mobili); la struttura è molto semplice e divisa in fasce:
- 1a fascia: header;
- 2a fascia: menù;
- 3a fascia: corpo;
- 4a fascia: footer;

Tutte senza la proprietà width, in modo da occupare tutta la larghezza della pagina... o almeno così credevo... perché la visualizzazione è corretta solo da pc, mentre da smarthphone per qualche motivo il sito risulta tagliato sulla destra di circa 50-100px e questo spazio è semplicemente lasciato bianco...
In pratica c'è una fascia bianca che va dall'alto al basso per tutta l'altezza del sito...
Siccome sia la struttura che le regole css sono molto semplici, e non essendo per nulla pratico di visualizzazione su smartphone non ho idea di dove andare a sistemare... mi sapreste dare qualche dritta?

il sito è online a questo indirizzo: www.medprova.altervista.org/home.html

Il codice e la struttura della pagina sono questi:

codice:
<style type="text/css">

/*reset*/
html {color: #000;     
   background: #FFF; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, 
textarea, p, blockquote, th, td {margin: 0;     
         padding: 0; }   
table {border-collapse: collapse;     
    border-spacing: 0; }   
fieldset, img {border: 0; }     
del, ins {text-decoration: none; }   
li {list-style: none; }   
caption, th {text-align: left; }   
q:before, q:after {content: ''; }    
sup {vertical-align: baseline; }   
sub {vertical-align: baseline; }   /*because legend doesn't inherit in IE */
legend {color: #000; }

/*fine reset*/

.container { 
background-image:url(img/sfondo2.jpg);
}
 
 
.header {
 height:135px;
 background-image:url(img/sfondo2.jpg);
}

#menu {
 border-bottom: solid 2px #000;
 border-top: solid 2px #000;
 background-image:url(img/sfondomenu3.jpg);
 height:35px;
 margin-bottom:20px;
}

.footer {
 border: solid 1px #000;
 height:129px;
 margin:auto;
 background-color:#000;
 color:#FFF;
 margin-top:10px;
}

</style>
</head>

<body>
    <div class="container">
        <div class="header"></div>
        <div id="menu"></div>
        <div class="footer"></div>
    </div>
</body>
</body>
All'interno dei div header, menu e footer ci sono i vari contenuti, ma anche togliendoli e lasciando vuoti i contenitori, il risultato nn cambia... anche proprio l'immagine di sfondo che dovrebbe andare ad occupare tutto lo spazio visibile, risulta tagliata sulla destra e sostituita con una fascia bianca...
Grazie a tutti per qualunque suggerimento!