div附加空格HTML CSS

我正在使用HTML和CSS構建示例網頁。我也使用Bootstrap。在鏈接Bootstrap CSS和鏈接Bootstrap CSS之後，我注意到頁面輸出的差異。
下面是我的代碼和輸出：div附加空格HTML CSS

將引導

將引導
將引導之前之後之前，菜單欄似乎來了利潤率，但經過添加Bootstrap，菜單欄清晰地粘貼到頁邊空白處。這是爲什麼發生？ Bootstrap中的哪些屬性會使這種變化發生？

下面是我的代碼：
的index.html：

<!DOCTYPE html> 
<html lang="en-us"> 
<head> 
<title>Server App</title> 
<link href='style.css' rel='stylesheet' /> 
</head> 
<body> 
<div id='top-bar' class="menu"> 
    <div id="logo"> 
    <img src="images/logo.png" width="220px" /> 
    </div> 
    <ul> 
    <li class="pill active">Home</li> 
    <li class="pill">About Us</li> 
    <li class="pill">Photos</li> 
    </ul> 
</div> 
<div id = "content"> 
</div> 
</body> 
</html>

的style.css：

body{ 
    background-color:#C6C4C4; 
} 
#top-bar{ 
    position:relative; 
    background-color:#6A5293; 
    padding:0px 0px 0px 0px; 
    height:50px; 
    margin:0px 0px 0px 0px; 
    width:100%; 
    display:block; 
} 
.menu ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    float:right; 
} 
.menu li{ 
    float:left; 
} 
.pill{ 
    display:flex !important; 
    width: 120px; 
    height:50px; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color:#6A5290; 
    justify-content:center; 
    align-items:center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 
.pill:hover{ 
    background-color:#5d3f91; 
} 
.active{ 
    background-color:#5d3f91; 
} 
#logo{ 
    float:left; 
} 
#content{ 
    height:800px; 
    width:70%; 
    margin-right:auto; 
    margin-left:auto; 
    background-color:#fff!important; 
    margin-top:10px; 
    margin-bottom:10px; 
}

來源

2015-11-15 Vishal Subramanyam Rajesh