Menu background I want it to be 100% width with no left, right and top gaps

Question

Menu background color should be full width, 24 inches and below should be full screen. This is what it looks like. The website URL is also in the image.

Below is the scss I used to add the background color. Could someone please edit the code below so that the background color left, right and top touch (there is a small gap at the top),

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

I tried using inspect in chrome but without success. Can't find anything on stackflow to solve it.

Answer 1

.header-main-wrapper is already surrounded by another div with the Bootstrap class container-fluid. Just add another unique class so you can apply a background color to it without affecting any other containers on the page. I named it container-background:

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

Then, in your SCSS or CSS file add:

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