Solution 1 :

I believe you are unnecessarily wrapping your styles with quotes.

background-color: 'blue';

Just change it to:

background-color: blue;

Solution 2 :

className should be class and remove the quotes on css attributes

.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;
}
 <div className='insideContainer'>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
    </div>

Solution 3 :

As the @kind user pointed out, since I copy-pasted an inline CSS, I forgot to change the background-color: 'blue' to background-color: blue, alongside with few other properties. Thank you!

Problem :

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:

enter image description here

enter image description here

Comments

Comment posted by Milos Popovic

Thank you! I copy-pasted the inline CSS and after hours of working, I didn’t see these errors. Thank you!

Comment posted by Milos Popovic

I am using React, so className is the right way.

By