Using Grid properties inside the Editor-Widget

Hello Folks!
I’m trying to implement grid-properties in a Widget. (Pagebuilder)

I’ve created some declarationblocks inside the custom style.css:

.bluebox {
    width: 250px;
    height: auto;
    margin: 0px 20px 40px 20px;
    padding:5px 20px 20px 20px;
    color: #ffffff;
    background-color: #0062C7;
}

.bluebox-container{
  display:flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap:wrap;
}	

The i gave the widget the bluebox-container class

Then i created div’s inside the widget:

<div class=bluebox><h1>Hack #1</h1>Lorem ipsum dolor sit amet</div>
<div class=bluebox><h1>Hack #2</h1>Lorem ipsum dolor sit amet</div>
<div class=bluebox><h1>Hack #3</h1>Lorem ipsum dolor sit amet</div>

But finally, the items inside the container now arrange as columns rather as rows.

I’ve tested it inside a sandbox-file i’ve created in brackets.

My question is: How can i implement flex-grids inside a editor-widget? I’ve also tried to wrap the inside of a but the result is the same.

Many thanks in advance!
Breezy