Der Menühintergrund soll 100 % breit sein und keine Lücken links, rechts und oben haben

Question

Die Hintergrundfarbe des Menüs sollte die volle Breite haben, 24 Zoll und darunter sollten im Vollbildmodus angezeigt werden. So sieht es aus. Die Website-URL ist ebenfalls im Bild enthalten.

Unten ist mein Scss zum Hinzufügen von Hintergrundfarbe. Könnte jemand bitte den Code unten so bearbeiten, dass sich die Hintergrundfarbe links, rechts und oben berührt (oben gibt es eine kleine Lücke),

.header-main-wrapper {
    max-width: 1720px;
    margin: 0 auto;
    background: #1c2e52;
    @media #{$xs,$sm,$md,$lg} {
        padding: 16px 0;

Ich habe versucht, inspect in Chrome zu verwenden, aber ohne Erfolg. Ich kann auf Stackflow nichts finden, um das Problem zu lösen.

Answer 1

.header-main-wrapper 周围已经有另一个 div，其 Bootstrap 类为 container-fluid。只需添加另一个唯一的类，这样您就可以对其应用背景颜色，而不会影响页面上的任何其他容器。我将其命名为container-background：

<div class="container-fluid container-background"> <!-- add class here -->
  <div class="header-main-wrapper">
                ... 
  </div>
</div>

然后，在您的 SCSS 或 CSS 文件中添加：

.container-background {
  background: #1c2e52;
}