<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
text-align: center;
}

.sidebar {
position: fixed;
background-color: #0059ab;
height: 1000px;
width: 200px;
padding: 0 20px;
}

ul{
list-style: none;
}

.nav-sidebar{
border:1px solid oldlace;
}

.sign-bar > li{
float: left;
width: 50%;
}

.sign-bar img{
width: 35px;
height: auto;
}

.sign-bar span{
color: white;
}

</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>

<body>
<div class="sidebar">
<div class="logo">
<img src="./OKKY 글자.png" style="width:100px;">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>

<div class="nav-sidebar">
<ul class="sign-bar">
<li><a href="#"><img src="https://png.icons8.com/ios/50/000000/download.png"></a><span>로그인</span></li>
<li><a href="#"><img src="https://png.icons8.com/ios/50/000000/contacts.png"></a><span>회원가입</span></li>
</ul>
</div>



</div>
<div id="b"></div>


</body>

</html>




왼쪽 여백 왜 생기는지 이해가안됩니다.