So I have a Banner-component which I'm getting from a third party library. This component creates a banner with an svg image in it (like a checkmark), some text and a closing button.

I need to style it some more so I've decided to wrap this component in my own div that I can style however I want.

Here's my code:

<div style={{
    transition: 'opacity 1s ease',
    opacity: successBannerOpacity,
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100%',
    zIndex: '9999',
    display: 'flex',
    justifyContent: 'center',
  }}>
    <Banner appearance="success" show closeHidden style={{
      width: '100vw',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      De e-mail is verstuurd.
    </Banner>
  </div>

I want to style the banner to be on the top of my webpage and act as a "success" message if the user clicks on a button and an API call is a success. For appearing/disappearing I'm using the opacity & transition values.

I'm also trying to use flexbox to make it so that my div is the entire width of the screen, but the content of the Banner-component is in the center.

The Banner has an attribute "closeHidden" just to not show the closing button, because I have a setTimeout of 3 seconds that will fade it out again (using the transition & opacity).

Here's how it looks now:

As you can see, the content itself is nicely in the center (also when I resize the page!) but the div/Banner is only as wide as it needs to be, instead of being 100% the width of my entire page!

Does anyone know how to use CSS and/or flexbox to get my desired result?

EDIT: If i give my Banner a width of 100%, this is the result:

As you can see, all the content is to the left again.