Pages are shoved after everything in layout

<template>
  <div >
    <div id="banner">🕷Spider-City🕷</div>
    <div>
      <ul id="title-bar">
        <li ><NuxtLink id="nav-item" to="/interests">Interests</NuxtLink></li>
        <li ><NuxtLink id="nav-item" to="/sites">Sites</NuxtLink></li>
        <li ><NuxtLink id="nav-item" to="/">Spider-City</NuxtLink></li>
        <li ><NuxtLink id="nav-item" to="/bio">Biography</NuxtLink></li>
        <li ><NuxtLink id="nav-item" to="/friends">Friends</NuxtLink></li>
      </ul>
    </div> 
    <slot></slot>
    <iframe src="https://john.citrons.xyz/embed?ref=example.com" id="funvertisement"/>
    <address id="contactInfo">
        Contact: <br>
        Discord:@spider_kyle<br>
        BlueSky:@spider_kyle<br>
        Github:Dynamic-Pistol<br>
        <a href="mailto:[email protected]">Email(not active)</a><br>
    </address>
  </div>
</template>

<script lang="ts" setup>

</script>

<style>

</style>