Не удается избавиться от пробелов по бокам заголовка

Я решил создать свой собственный блог, и пытаюсь поработать над макетом для него. Я только начал на нем, и у меня уже есть проблемы с заголовком. Мне нужен заголовок, растянутый по всему экрану без пробелов сверху или по бокам, и я планирую сделать мой блог отзывчивым. Я попытался установить поле на 0 и не могу заставить что-либо работать. Я пытался найти ответ здесь, но не мог заставить что-либо работать. это мой HTML и CSS. Спасибо за любую помощь!

ps Причина, по которой я сделал логотип таким странным образом, заключается в том, что у меня будет одно слово жирным шрифтом и одно слово тощим шрифтом, и это был единственный способ, которым я мог придумать.

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;
}
Источник

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

Источник

Удалите соответствующие поля из 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>

Источник
Другие вопросы по тегам