How to make 3 bootstrap blocks on top of the background?

Question

css

I'm trying to do the following, 3 blocks, left, center, right.

As in the picture, it turned out so far only to make the menu in the center

+ when scrolling down, the menu is not the full width of the screen

.ftco-navbar-light.scrolled {
    position: fixed;
    right: 0;
    left: 50%;
transform: translateX(-50%);
    top: 0;
  z-index: 3;
    margin-top: -130px;
    background: #fff !important;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }

I tried using width and it doesn't work(

Answer 1

Show the html code
The easiest way is to put the block in container-fluid - it will stretch to the full width and the desired fill, for example black.
Next in the block write container where your menu items will be centered and give it a background transparent and color for the a tags white.

Answer 2

Do you have the opportunity to create a sandbox?
It's easier to suggest a solution

Answer 3

You have 3 blocks so wrap their parent block and give it display:flex and align-items: space-between;