使用CSS3+；在菜单中出现意外对齐；HTML5，当我添加输入和div时

我刚开始使用html5和css3。我正在尝试为最终项目创建一个基本的web

基本上我需要一个菜单在左侧（固定位置）+输入按钮在顶部中心位置+div，其中显示所有上传的内容（文本文件）

下面是完整代码的拼图：

如您所见，菜单向下滚动

CSS:

预期结果：

有什么建议吗？非常感谢。

CSS更改：

#nav {
    position: fixed;
    top: 0; left: 0;
}

片段：

*{
保证金：0；
填充：0；
}
身体{
背景色：#巴巴巴；
颜色：#fff；
}
div#文件输出{
保证金：自动；
边缘顶部：50px；
左边距：250像素；
右边距：50px；
边缘底部：50px；
宽度：960px；
高度：800px；
空白：行前；
边框：实心1px黑色；
填充物：5px；
}
输入[type=“file”]{
保证金：自动；
宽度：960px；
高度：50px；
左边距：250像素；
空白：行前；
边框：实心1px黑色；
填充物：5px；
}
#导航{
边框：3px实心#3e4547；
盒影：2PX2PX8PX000000；
边界半径：3px；
-moz边界半径：3px；
-webkit边界半径：3px；
位置：固定；
顶部：0；左侧：0；
}
#导航{
列表样式：无；
填充：0；
宽度：200px；
}
#导航ul{
位置：相对位置；
z指数：-1；
}
#李海军{
位置：相对位置；
z指数：100；
}
#李国荣{
利润上限：-23px；
-moz跃迁：0.4s线性0.4s；
-ms转换：0.4s线性0.4s；
-o型过渡：0.4s线性0.4s；
-webkit转换：0.4s线性0.4s；
过渡：0.4s线性0.4s；
}
#李娜{
背景色：#d4d5d8；
颜色：#000；
显示：块；
字体大小：12px；
字体大小：粗体；
线高：28px；
大纲：0；
左侧填充：15px；
文字装饰：无；
}
#海军李a.sub{
背景：#D45D8URL（“../images/down.gif”）不重复；
}
#导航李a+img{
光标：指针；
显示：无；
高度：28px；
左：0；
位置：绝对位置；
排名：0；
宽度：200px；
}
#导航李a img{
边框宽度：0px；
高度：24px；
线高：28px；
右边距：8px；
垂直对齐：中间对齐；
宽度：24px；
}
#导航李a：悬停{
背景色：#bcbdc1；
}
#海军ulli a{
背景色：#eee；
边框底部：1px实心#ccc；
颜色：#000；
字体大小：11px；
线高：22px；
}
#导航ulli a：悬停{
背景色：#ddd；
颜色：#444；
}
#海军航空母舰{
背景：url（“../images/bull.png”）不重复；
边框宽度：0px；
高度：16px；
线高：22px；
右边距：5px；
垂直对齐：中间对齐；
宽度：16px；
}
#第N个孩子（单数）a img{
背景：url（“../images/bulb2.png”）不重复；
}
#导航a.sub：焦点{
背景：#bcbdc1；
大纲：0；
}
#导航a：焦点~ul li{
边际上限：0；
-moz跃迁：0.4s线性；
-ms转换：0.4s线性；
-o-过渡：0.4s线性；
-webkit转换：0.4s线性；
过渡：0.4s线性；
}
#导航a:焦点+图像导航，#导航a:活动+图像导航{
显示：块；
}
#导航a.sub:激活{
背景：#bcbdc1；
大纲：0；
}
#导航a:有效~ul li{
边际上限：0；
}
#导航ul：悬停li{
边际上限：0；
}

您只需添加

位置：固定；排名：0至
#导航
#nav {
    position: fixed;
    top: 0; left: 0;
}