Elements Overlapping When Screen is Resized

I've created a table of contents for my articles that I want to scroll with the page.

It works just fine on larger screens, but if you resize the screen to be smaller or view the article on a smaller screen the TOC overlaps with the article text.

This is the CSS I'm using for the TOC

#toc_container {
    position: fixed;
      left: 0;
      font-size: 0.8em;
        margin: 0 0 1em 1em;
      border-radius: 15px;
      background: transparent;
    border: 1px solid #aaa;
    display: table;
    font-size: 100%;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

If anyone has any ideas, let me know! I'm pulling my hair out because my CSS knowledge is pretty limited.

Elements Overlapping When Screen is Resized

1 Comments

Didn't find what you were looking for?