Почему класс-оболочка не работает в Vue. js?

Question

Я новичок в Vue. js и сейчас работаю над основами c css. Я использовал .wrapper класс, чтобы обернуть детей с 1200px, но он не работает .. почему?

Пример. vue

<template>
  <header>
    <div class="wrapper">
      <p>Test</p>
    </div>
  </header>
</template>

<script>
export default {};
</script>

<style lang="scss">
$color: red;
header {
  height: 48px;
  background: $color;
}
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
</style>

Wrapper div не переносит дочерний элемент p, я не знаю, почему это не работает, даже если это очень простой пример ...