Elementy "spadają" pod siebie przy pomniejszaniu strony.

Cześć.
Zaznaczam od razu, że jestem kiepski w te klocki, ale potrzeba zmusiła mnie do stworzenia strony internetowej.
Mój problem polega na tym że mam takie dwa punkty:

Jest to lista i są to elementy li.
Kiedy pomniejszam stronę robi się tak:

Chciałbym żeby te 2 elementy były obok siebie.

<div id="navbox">

            <ul>
            <li id="pro"> 
            <a href="?s=projects" >
                <img src="img/code.png" alt="Projekty" width="310" height="214" >            
                <h1>Projekty</h1>
                Moja praca i hobby za razem. Aplikacje i strony internetowe rozwijane w nowczesnych technologiach.         
                </a>    
            </li>    
            <li id="about">
            <a href="?s=about" >            
            <img src="img/guy.png" alt="O mnie"  width="310" height="214" >            
            <h1>O mnie</h1>
            Kilka słów o mnie i moich zainteresowaniach. Narzędzia jakich używam i pomysły jakie chciałbym zrealizować.
            </a>
            </li>
            </ul>

</div>

#navbox{
border: 2px solid rgb(37,37,37);
margin:10px;
background-color: rgb(36,36,36);    
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
#navbox li{
display:inline-block; 
list-style:none;
max-width: 48%;
min-width: 48%;
text-align: center;
font: bold 16px Tahoma;
margin-top: 10px;
margin-bottom: 10px; 
}
#navbox li h1{
margin: 10px;    
font: bold 25px Tahoma;
}
#navbox li a{
color:white; 
text-decoration: none;    
}
 

Dzięki za pomoc ;)

nadaj kontenerowi width lub min-width

działa. Dzięki ;)