How to fix the error with the content container?

Question

Layout

Hello everyone, I’m developing the first site from scratch, this is the first site, don’t judge strictly by the code :)
when the site skeleton was already ready, I started to design a little functionality, so to speak, and when the width of the container with content becomes less than 1000 pixels, it starts to overlap the container with the sidebar if there is a solution, tell me I will be grateful
html container

<div class="container row">
            <div class="sidebar">
                <div class="inner-sidebar"> Тут текст <a href="ссылка" class="ssilkanafilm" target="_blank">название</a>тут тоже текст<a href="ссылка" class="ssilkanafilm" target="_blank">название</a>Текст <a href="ссылка" class="ssilkanafilm" target="_blank">название</a>.</div>
            </div>
            <div class="content">
                <div class="inner-content" id="qlav">ТУт большой текст</div>
            </div>
        </div>

.content {
    width: 85%;
    float: left;
    padding-left: 10px;
}
.inner-content{
    min-height: 500px;
    color: black; font-size: 17px;padding: 5px; background-color: darkgray; border: solid black; box-shadow: 5px 5px 15px; border-radius: 10px;text-align: inherit;
    font-family: "Adigiana 2 V1" !important;
}
.sidebar {
    width: 15%;
    float: left;
    min-height: 500px;
    padding-right: 10px;
}
.inner-sidebar{
    min-height: 500px;
        color: black; font-size: 17px;padding: 5px; background-color: darkgray; border: solid black; box-shadow: 5px 5px 15px; border-radius: 10px;text-align: inherit; width: 187px;font-family: "Adigiana 2 V1" !important;
}