CSS property being overriden

I’ve written so many pure CSS lines of code and I have never been in a situation where I do not know where the property is coming from.
The inline CSS works, but not the class/id.
Doctype is typed correctly.
I’ve spent a loooot of time researching, and nothing helped.
You are my only hope.

The html:

    <div className='insideContainer'>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
    </div>

The CSS:

.insideContainer {
  width: 300px;
  height: 400px;
  border: 1px solid #888;
  overflow: scroll;
  margin: 0 auto;
}
.default {
  background-color: 'blue';
  width: 200px;
  height: 50px;
  margin: 5px;
  display: 'flex';
  justify-content: 'center';
  align-items: 'center';
  border: 1px solid #888;
}

The browser:

>Solution :

I believe you are unnecessarily wrapping your styles with quotes.

background-color: 'blue';

Just change it to:

background-color: blue;