Пробелы при использовании ширины, даже если фон окрашен

Я пытаюсь уменьшить этот DIV, используя свойство ширины, но это просто создает неудобные пробелы, хотя я раскрасил элемент html в верхней части страницы с помощью !important, чтобы переопределить мой файл Bootstrap. Как мне это исправить?

Мой код:

{
  background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
  background-size: cover;
  min-height: 100%;
  margin: 0px;
  padding: 0px;
}

.navbar a {
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffd6bd;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar {
  background-color: rgb(50, 19, 32);
}

.spacer {
  background-color: rgb(47, 24, 33);
  padding: 50px;
}

.about-me {
  background-color: rgb(38, 14, 24);
  color: wheat;
  display: flex;
  justify-content: center;
  padding: 50px;
  outline: wheat solid 1px;
  outline-offset: -1rem;
  width: 70%;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous">
  <link rel = "stylesheet" href = "style.css">
</head>

<body>
  <nav class = "navbar">
    <div class = "container-fluid"></div>
    <a href = "about">About Me</a>
    <a href = "projects">Projects</a>
    <a href = "blog">Blog</a>
    <a href = "contact">Contact</a>
    </div>
  </nav>
  <div class = "spacer"></div>
  <section class = "about-me">
    About Me

  </section>



</body>

</html>

Обновлено: Хорошо, исправлено, теперь оно включает HTML-код!

Можете ли вы также поделиться html-кодом, пожалуйста?

— 27.08.2024 09:58

Извините, только что сделал!

— 27.08.2024 09:59

html css

27.08.2024 09:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, это немного глупая ошибка, но вы забыли добавить * в первую строку CSS-кода:

* {
  background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
  background-size: cover;
  min-height: 100%;
  margin: 0px;
  padding: 0px;
}

.navbar a {
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffd6bd;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar {
  background-color: rgb(50, 19, 32);
}

.spacer {
  background-color: rgb(47, 24, 33);
  padding: 50px;
}

.about-me {
  background-color: rgb(38, 14, 24);
  color: wheat;
  display: flex;
  justify-content: center;
  padding: 50px;
  outline: wheat solid 1px;
  outline-offset: -1rem;
  width: 70%;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous">
  <link rel = "stylesheet" href = "style.css">
</head>

<body>
  <nav class = "navbar">
    <div class = "container-fluid"></div>
    <a href = "about">About Me</a>
    <a href = "projects">Projects</a>
    <a href = "blog">Blog</a>
    <a href = "contact">Contact</a>
    </div>
  </nav>
  <div class = "spacer"></div>
  <section class = "about-me">
    About Me

  </section>



</body>

</html>

Ладно... это было унизительно, я давно не прикасался к CSS. Спасибо, чувак!

— 27.08.2024 10:03

Рад, что это помогло! Удачи. :)

— 27.08.2024 10:04

Может ли кто-нибудь объяснить, почему люди отрицают ответы?

— 27.08.2024 17:10

27.08.2024 10:02

HTML-код:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous">
    <link rel = "stylesheet" href = "style.css">
</head>
<body>
    <nav class = "navbar">
        <div class = "container-fluid d-flex justify-content-center">
            <a href = "about">About Me</a>
            <a href = "projects">Projects</a>
            <a href = "blog">Blog</a>
            <a href = "contact">Contact</a>
        </div>
    </nav>
    <div class = "spacer"></div>
    <section class = "about-me">
        About Me
    </section>
</body>
</html>

Вот ваш скорректированный CSS:

html, body {
    background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Keeps everything centered */
}

.navbar a {
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffd6bd;
    padding-left: 15px;
    padding-right: 15px;
}

.navbar {
    background-color: rgb(50, 19, 32);
    width: 100%;
    padding: 15px 0;
}

.spacer {
    background-color: rgb(47, 24, 33);
    padding: 50px;
    width: 100%;
}

.about-me {
    background-color: rgb(38, 14, 24);
    color: wheat;
    display: flex;
    justify-content: center;
    padding: 50px;
    outline: wheat solid 1px;
    outline-offset: -1rem;
    width: 70%;
    margin: 0 auto;
}

Обновлено: Я пересмотрел код.

Фрагмент кода, которым вы поделились, просто дает градиентный цвет, никакой контент не отображается из-за background-size: cover;.

— 27.08.2024 10:07

Позвольте мне быстро пересмотреть это

— 27.08.2024 10:13

27.08.2024 10:05