html - How to make center elements works with flexbox in home page?

Question

I am using a flexbox in my home page https://www.visitmontaione.com/wcomm/it/ By the way I don't understand why the black (#barrabookingforhome) area do not fit 100% wide. Than , I would like to put inside some divs and make the black area height depending by the content. But even if I remove the height of #barrabookingforhome, nothing change.

here is the html code:

<div id="containersliderhome">
[rev_slider alias="slider-1"][/rev_slider]
<div id="barrabookingforhome">
asdlkfaòskdlj asòdlj òaslkj aòlf jasò
</div>
</div>

and css

#containersliderhome{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


#barrabookingforhome{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    background: black;
    height: 400px;
    width: 100%;
    z-index: 999;
    transform: translateX(-50%) translateY(0);
    }   

DO you have any idea? Many thanks for your suggestions.

question from:https://stackoverflow.com/questions/65951934/how-to-make-center-elements-works-with-flexbox-in-home-page

Answer 1

Waitting for answers