CSS Float 使内容在较小的屏幕上下降

Question

当对平板电脑和手机的屏幕分辨率使用媒体查询时，包含所有链接和右侧社交媒体按钮的“sideNav”确实保持 float ，但包含所有内容的“maincontent”部分下降并且不会熬夜漂浮在“sideNav”上。我不明白为什么？ “sideNav”通常 float 在“maincontent”的右侧，但在调整大小时不会 float 。

小型桌面显示器的代码:

@media (max-width:1100px) and (min-width:767px){
body{
width:90%;
margin:auto;
}
#body, #wrap{
width:100%;
margin:auto;
}
#maincontent{
font-size:100%;
width:auto;
margin:auto;
border:1px solid black;
}
#header{
font-size:100%;
display:inline-block;
}
#google_translate_element{
display:inline-block;
}
#search{
}
#breadCrumb{
height:1em;
padding-top:1%;
font-size:95%;
}
#navbox{
height:2em;
margin-bottom:1%;
margin-top:2%;
width:100%;
}
#navbox li{
margin:none;
font-size:95%;
}
#sideNav{
width:30%;
padding:0;
border:1px solid black;

}
}

有问题的页面:http://analyzedstock.com/testing/basics-of-stock-market.html

CSS : http://analyzedstock.com/testing/main.css

请调整浏览器大小

Answer 1

规则引起的问题:#header { width: 100%; }

请尝试删除或调整它以使网站在较小的屏幕上正常工作。