How to not overwrite components using Tailwindcss?

Question

I created a component Header and when I log it into a component called Home, Header overwrites the h3 and even though I tried to put a display block on each component, it didn’t work

<template>
  <div class="container">
    <Header />
    <div class="flex m-5">
      <h3>Hello</h3>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
    Header: () => import('@/components/Header.vue')
  }
}
</script>

Header:

    <template>
          <nav
        class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
      >
            <!-- Etc... -->
        </nav>
</template>

Someone can help me and take away this doubt, I have to use a display block even?