Как растянуть <div> на всю ширину страницы?

Рейтинг: 1Ответов: 1Опубликовано: 17.07.2023

После создания блока он отображается не на всю ширину страницы, а почти до конца. Пробовал менять width и min-width- бесполезно. Блок просто увеличивался справа. Также использовал margin, padding и border, но это тоже ничего не дало (от слова совсем, блок никак не изменялся).

html {
  background-color: #3E3E3E;
}

.topbar {
  padding: 80px;
  text-align: center;
  background: #1F1F1F;
  color: white;
}

.topbar p {
  color: white;
  text-align: center;
  font-size: 21px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>TEST</title>
</head>

<body>
  <div class="topbar">
    <p>Это сайт, который сделан на <b>HTML</b> и <b>CSS</b>!</p>
  </div>
</body>

</html>

Не знаю, может это из-за браузера (Chrome), может я криворукий, но проблема остаётся =)

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Дело в том, что тэг 'body' по стандарту имеет значение. Стандартные значения тэга укажу ниже.

body {
    display: block;
    margin: 8px;
}

Что бы вам это исправить, вам достаточно добавить в 'css: body', и указать 'margin как 0px;', пример ниже

body {
    margin: 0px;
}

Habr: Отступ 8px у body: история стиля, который никому не нужен