There is a problem that css is not applied to app.vue

I'm a beginner who just entered vue.js. After creating the project, I want to apply a simple css to the web. (margin, box size) However, for some reason, the css written in app.vue does not apply at all.

//app.vue

<template>
  <div>
    <Nav />

    <div class="banner">
      <carousel
        :autoplay="true"
        :nav="true"
        :dots="true"
        :items="1"
        :pullDrag="true"
      >
        <!-- <img src="https://placeimg.com/200/200/any?1" /> -->
        <img src="./assets/1.png" />
        <img src="./assets/2.png" />
        <img src="./assets/3.png" />
      </carousel>
    </div>

    <div id="category-title">
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
    </div>
  </div>
</template>

<script>
import Nav from "./components/Nav";
// import Banner from "./components/Banner.vue";
import carousel from "vue-owl-carousel";

export default {
  name: "App",
  components: {
    Nav,
    carousel,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-left: 30%;
  margin-right: 30%;
}

.banner {
  height: 100px;
}

#category-title {
  margin-top: 100px;
}
</style>

I want to apply the size of the margin and banner in , but no css applies. I don't think there's a problem with other projects, but can I know the suspected cause?

Thank you.