元素滑出导航栏，请问是什么原因

图片说明

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
</head>
<body style="background-color:#16C123">
<div class="navbar">
    <div class="nav_left">
        <div class="icon">
            <img src="img/index_icon.jpg">
        </div>
        <h2>Welcome To Lilver's Index</h2>
    </div>
</div>
<div style="height:1000px; width:200px; background-color:#904849"></div>

</body>
</html>


@charset "UTF-8";
body{ font-size:62.5%}

/* ---------------------------- navbar-----------------------------------*/
.navbar{ height:14em; width:100%; background-color:white;position:fixed; top:0em;
-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;                 /*  去除圆角  */
filter:alpha(Opacity=80); -moz-opacity:0.8; opacity:0.8;                        /* 设置半透明 */
}
.nav_left{ height:10em; width:80em}
.icon{ margin-left:6em; margin-top:2em; height:10em; width:10em;}
div.icon > img{ height:10em; width:10em}

检查下css是不是写错了。