I am working on an application and have ran into some CSS styling issues. I am battling against position: sticky and have found myself stuck in a hole I'm not sure how to escape from.

My desired end result is to have a page that is scrollable, but I want the <nav> (white background), <div id='top'> (yellow background), and <div class='selector'> (pink background) to be "sticky" at the top as the user scrolls the page (visual representation of desired result).

The charts will be constant in sizing, but the list of questions will be an undetermined length. As the user scrolls through the list of questions, I want them to always have easy access to the search bar and breadcrumb heading.

What am I doing wrong?? Right now the yellow section behaves as expected up until a certain point, then it randomly decides to scroll away and ignore the sticky. (I'm not even sure where to begin with the pink section, especially since I can't figure out the first part!)

Any help and explanations would be much appreciated to help me learn for the future.

const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [10, 20, 15, 5],
        backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
      },
    ],
    labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
  },
  options: {
    maintainAspectRatio: false, 
    animation: {
      duration: 0
    },
    plugins: {
      datalabels: {
        formatter: (value) => {
          return ' '   value   ' questions';
        }
      }, 
      legend: {
        display: false,
      },
    }
  }
});

const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
  type: 'bar',
  data: {
    labels: ['1st', '2nd', '3rd', '4th '],
    datasets: [
      {
        label: 'Attempt Progression',
        backgroundColor: 'rgba(173, 173, 173)',
        data: [0.75, 1, 1.75, 2, 3],
      },
    ],
  },
  options: {
    animation: {
      duration: 0
    },
    scales: {
        xAxes: [{
          categorySpacing: 0
        }]
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        align: 'center',
        color: '#666',
        font: {
          weight: 'normal',
        },
      },
      legend: {
        display: false,
      },
    },
  },
});

  nav {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    padding: 0px 20px;
    box-sizing: border-box;
    font-size: 20px;
    color: #5F6368;
    background-color: white;
    border-bottom: 1px solid lightgray}

  body {
    margin: 0;
    position: absolute;
    top: 65px; left: 0px;
    width: 100%;
    height: calc(100vh - 65px);
    background-color: #FCFCFC;
    display: grid;
    grid-template-rows: 96px minmax(120px, 1fr);
    grid-template-areas:
      "top"
      "content"}

  /* --------[TITLE FEATURE]-------- */
  #top {
    grid-area: top;
    display: flex;
    position: sticky;
    top: 65px;
    justify-content: space-between;
    align-items: center;
    margin: 0px 40px;
    font-size: 38px;
    color: #484848;
    background-color: yellow;
    border-bottom: 1px solid lightgray}

  #breadcrumb {
    color: #484848;
    font-size: 14px;
    margin: 10px 40px;}

  #breadcrumb ul {
    padding: 0;
    margin: 0;
    list-style: none;}
    #breadcrumb li {display: inline}

  #breadcrumb li:not(:last-child)::after {
    content: '▸';
    margin: 0px 10px;}

  #breadcrumb a {
    text-decoration: none;
    color: #581F98;
    font-weight: 800}

 /* --------[CHARTS]-------- */
#content {
  margin: 20px 40px 0px 40px}

#content .charts {
  display: flex;
  width: 100%;
  border-bottom: 1px solid lightgray}

.charts .DOK {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid lightgray}

.charts .attempts {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;}

/* ------ [TOP CONTROLS] ------ */
.selector {
    background-color: pink;
    display: flex;
    align-items: center;
    padding: 20px 0px;}

.selector .title {font-weight: 800}

.selector input[type='search'] {
    flex: 1;
    font-size: 16px;
    box-sizing: border-box;
    width: 100%;
    border-radius: 6px;
    margin: 0px 20px;
    padding: 8px 20px;
    border: 1px solid black;}

.selector button {
    margin-top: -6px;
    font-size: 16px}


/* ------ [QUESTIONS] ------ */
#content .questions {
  background-color: green;
  padding: 20px;}

/* Question box style */
#content .questions section {
  min-height: 200px;
  margin-bottom: 30px; /* Space under each question */
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;}
  #content .questions section:hover {border: 2px solid #D4BBF1;}

/* Question excerpt style */
.questions section .excerpt {
  padding-bottom: 24px; /* Space under excerpt */
  font-size: 14px;
  font-style: italic;}

/* Main question style */
.questions section .question {
  padding-bottom: 16px; /* Space under question */
  font-weight: 800;}

/* Answer choice style */
.questions section li {
  margin-bottom: 10px; /* Space under each answer option */
  list-style: none;}
  .questions section ul {margin: 0px;}

/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}

/* Coloring for correct answer */
.questions section li.correct {
  color: #34CB4A;
  font-weight: 800;}

<head>
  <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
  <nav></nav>
</head>

<body>
  <div id='top'>
    <div class='title'>