Автоматические поля при использовании css

Если бы я использовал CSS, мой div автоматически отступал влево и вправо, если я использую встроенный стиль, он работает идеально, я не понимаю, что происходит, когда я использую CSS я использую React.js

Я пытаюсь стилизовать с помощью CSS, он дает автоматическое поле слева и справа

<div className = "container">
            <h1>hello</h1>
</div>

//CSS-код

.container background-color: lightblue; }

// я использую встроенный стиль, он отлично работает

``
<div style = {{backgroundColor: 'blue'}}>
            <h1>hello</h1>          
</div>
``