无法去掉 header 两边的空格

Question

我决定创建自己的博客，并正在尝试为其布局。我刚开始使用它，我已经遇到了 header 的问题。我想要一个 header 一直延伸到整个屏幕，顶部或侧面没有空白，并且我计划让我的博客响应。我试过将边距设置为 0，但似乎无法正常工作。我试图在这里搜索答案，但没有任何效果。这是我的 html 和 css。感谢您的帮助！

p.s。我以如此奇怪的方式制作徽标的原因是因为我将使用粗体字体和瘦字体的单词，这是我能想到的唯一方法。

HTML:

<!DOCTYPE html>

<html>
<title>FatHead | Blog</title>
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400itali" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">

<head>

</head>

<body>
<div class="header">

    <div class="logo">

        <h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>

    </div>

    <div class="nav">

    </div>

</div>






</body>    


</html>`

CSS:

.header{
background-color: lightslategray;
margin:0;
padding:0;
width: 100%;


}

.logo{
text-align: center;
display: block;
margin:15px;
}

#logo-large{
display: inline;
}

#logo-small{
display: inline;
}

Answer 1

从 body 和 .logo 中删除适当的边距。

body {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.header {
  background-color: lightslategray;
  margin: 0;
  padding: 0;
  width: 100%;
}
.logo {
  text-align: center;
  display: block;
  margin: 0 15px 15px;
}
#logo-large {
  display: inline;
}
#logo-small {
  display: inline;
}

<div class="header">

  <div class="logo">

    <h1 id="logo-large">FAT</h1>
    <h1 id="logo-small">HEAD</h1>

  </div>

  <div class="nav">

  </div>

</div>

Answer 2

您必须添加

body
 {
    margin:0;
    padding:0;
 }

并更改您的 css

.logo{
 text-align: center;
 display: block;
  margin:15px;
 }

至此

  .logo{
 text-align: center;
 display: block;
  margin:0 15px 15px 15px;
 }

JSFiddle

无法去掉 header 两边的空格

Can't get rid of white spaces on sides of header

html

css

blogs

header