html - CSS放置没有填充的导航

Question

我想将导航栏和彩色线放在网站顶部，没有白色间隙。但是，当我添加以下代码时:

body {    
    padding: 0 !important;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto; 

}

它会影响我添加的所有段落和 future 元素的填充，而且它离边框太近了。

我怎样才能把导航栏和导航栏放在顶部和两侧而不留出空白？

引用图片:

当前 CSS

/* layouts */ 
p { 
    margin: 5px; 
    font-size: 16px; 
    color: #04231b; 
    padding: 5px; 
} 
#topline { 
    margin-top:0px; 
    height:10px; 
    background-color:#118B69; 
} 
body { 
    padding: 0 !important; 
    font-family: 'Roboto', sans-serif; 
    margin: 0 auto; 
} 
h2 { 
    margin: 5px; 
    color: #052a20; 
    padding: 5px; 
} 
#photos { 
    float: left; 
} 
#text { 
    float: left; 
}
#header { 
    margin-top: 0 auto; 
} 
#form { 
    padding: 10px; 
} 
/* navigation bar */ 
#navigation ul { 
    list-style-type: none; 
    padding: 0; 
    overflow: hidden; 
    background-color: #094736; 
    margin-top: 0; 
} 
li { 
    float: right; 
} 
li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
li a:hover { background-color: #118B69; }

Answer 1

ul 以边距呈现。

请设置没有边距的样式，如下所示:

#navigation ul {
    margin-top: 0;
}

您还可以控制 li 的边距。