Я разработал одну адаптивную веб-страницу. Есть фиксированная вершина bootstrap navbar и область основного контента. В десктопе он показывает отлично. Если я изменю адаптивный макет на мобильные устройства с помощью инструментов chrome dev. Некоторая часть основной области содержимого скрыта в правой части экрана. Если я делаю горизонтальную прокрутку, то я вижу основной контент.
Как я могу видеть основной контент полным, когда я меняю ширину другого устройства?
Здесь вы можете увидеть скриншот, где он скрыт 
#mainbody{
float:left;
padding: 5px 0px 0px 5px;
overflow:hidden;
max-width: 500px;
}
на моей странице я использую это:
<div id="mainbody"> main content here....</div>
Скажите, пожалуйста, как основной контент будет виден полностью без обрезки с правой стороны для любого мобильного устройства?