ciao a tutti,

premetto che sono un principiante.
Ho realizzato un sito utilizzando i fogli di stile, ma ho alcuni problemi di risoluzione.
Ad esempio al di sotto dei 1024 pixel (compresi) di larghezza il banner risulta tagliato e con esso anche il terzo box.
Mentre il menu in alto a destra è leggibile il banner viene tagliato.
Dove ho sbagliato.
Vi copio qui sotto le parti del file css e html "incriminate".

Grazie a tutti e buon lavoro.
Ecco il file .CSS

codice HTML:
#header-wrapper    {    }
    #header    {        position: relative;        padding: 3em 0em;    }
    #logo    {        position: absolute;        top: 1em;        left: 0;    }        #logo h1    {            }        #logo a    {        text-decoration: none;        color: #0173B2;    }
    #menu    {        position: absolute;        top: 2em;        right: 0;    }        #menu ul    {        display: inline-block;    }        #menu li    {        display: block;        float: left;        text-align: center;    }        #menu li a, #menu li span    {        padding: 1em 1.5em;        text-decoration: none;        font-weight: 500;        color: rgba(0,0,0,.8);    }        #menu li:hover a, #menu li.active a, #menu li.active span    {    }        #menu a:hover    {        text-decoration: underline;    }        #menu .current_page_item a    {    }        #menu .icon    {    }
    #banner-wrapper    {        overflow: hidden;        padding: 10em 0em 5em 0em;        background: url(immagini/DSC08900.JPG) repeat-y center top;        background-size: 100% auto;    }        #banner .title    {        margin-bottom: 3em;        text-align: center;    }        #banner h3    {        margin-bottom: 1em;        font-size: 1.6em;        font-weight: 800;        color: rgba(0,0,0,.8);    }
    #banner .button    {        margin-top: 1em;    }
    #banner-inside    {    height: 200px;    background: url(immagini/DSC08900.JPG);    background-size: 100% auto;    padding-top: 4em;    padding-right: 0em;    padding-bottom: 2;    padding-left: 0px;    }        #page-wrapper    {        overflow: hidden;        padding: 5em 0em;        background: #FFF;    }
    #page    {    }
    #page .title    {        margin-bottom: 3em;        text-align: center;    }        #page h3    {        margin-bottom: 1em;        font-size: 1.6em;        font-weight: 800;        color: rgba(0,0,0,.8);    }
    .pboxA,    .pboxB,    .pboxC    {        width: 900px;    }
    .pboxA,    .pboxB    {        float: left;        margin-right: 24px;    }        .pboxC    {        float: right;    }
    #content    {    }
    #sidebar    {    }
    #footer-wrapper    {        overflow: hidden;        padding: 5em 0em;        background: rgba(0,0,0,.05);    }
    #footer    {    }        #footer h2    {        display: inline-block;        padding-bottom: 1em;        font-size: 1.6em;        font-weight: 400;    }
    #footer #fbox1    {        float: left;        width: 384px;    }
    #footer #fbox2    {        float: right;        width: 792px;    }
    #copyright    {        overflow: hidden;        padding: 5em 0em;        border-top: 1px solid rgba(0,0,0,0.08);    }        #copyright p    {        letter-spacing: 0.20em;        text-align: center;        text-transform: uppercase;        font-size: 0.8em;        color: #000033;    }        #copyright a    {        text-decoration: none;        color: rgba(0,0,0,0.8);    }
Ecco il file .HTML

codice HTML:
<body><div id="header" class="container">    <div id="logo">        <h1><a href="index.html">testo</a></h1>    </div>    <div id="menu">        <ul>            <li><a href="menu1.html" accesskey="1" title="">testo</a></li>            <li><a href="menu2.html" accesskey="3" title="">testo</a></li>            <li><a href="menu3.html" accesskey="2" title="">testo</a></li>            <li><a href="menu4.html" accesskey="4" title="">testo </a></li>            <li><a href="menu5.html" accesskey="5" title="">testo</a></li>        </ul>  </div></div><div id="banner-wrapper">    <div id="banner" class="container">      <div class="boxA">            <h3>testo</h3>            <p>testo</p>            <a href="servizi.html" class="button">continua a leggere </a>                </div>        <div class="boxB">            <h3>testo</h3>            <p>testo</p>            <a href="servizi.html" class="button">continua a leggere </a>                </div>        <div class="boxC">            <h3>testo</h3>            <p>testo</p>            <a href="servizi.html" class="button">continua a leggere </a>        </div>    </div></div><div id="page-wrapper">    <div id="page" class="container">      <div class="pboxA">            <h3>Nuovo articolo </h3>          <p><a href="approfondimenti_sito.html"><img src="immagini/foto.jpg" alt="" width="120" height="120" border="0" class="image image-left" /></a>testo</p>        <a href="approfondimenti_sito.html" class="button">leggi qui </a>        </div>        <div class="pboxB">            <h3>Nuovo articolo </h3>            <p><a href="approfondimenti_sito.html"><img src="immagini/foto.jpg" alt="" width="120" height="120" border="0" class="image image-left" /></a>testo</p>            <a href="approfondimenti_sito.html" class="button">leggi qui </a>        </div>  </div></div><div id="copyright">        <p>Copyright (c) 2014 miosito.it. diritti riservati. | p.iva n° 012345678910 | sitemap.xml </p></div></body></html>