colliding issues with a responsive row html css

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Rubik, sans-serif;
  color: #fff;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: #121212;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body main {
  margin-left: 290px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

body main section {
  padding-top: 110px;
}

body main section .pad {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-right: 20px;
  padding-left: 20px;
}

body main .separator {
  margin-bottom: 50px;
}

body main p {
  margin: 0;
}

body main .title {
  -webkit-animation: 0.5s ease-out 0s 1 bottomToTop;
  animation: 0.5s ease-out 0s 1 bottomToTop;
}

body main h3 {
  margin: 0;
  font-size: 37px;
  white-space: nowrap;
}

body main .picture img {
  border-radius: 50%;
  height: 110px;
}

body main .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body main .row .box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 20px;
}

@media (max-width: 768px) {
  body main {
    margin-left: 0px;
  }
  body main .row {
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  body main .row .box {
    padding: 10px 10px;
  }
}

.sidebar {
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 40px;
  overflow-y: auto;
  height: 100vh;
  width: 290px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: fixed;
  z-index: 5;
}

@media (max-width: 768px) {
  .sidebar {
    margin-left: -290px;
  }
}

.sidebar .logo {
  font-size: 30px;
  font-weight: 700;
}

.sidebar .list-components {
  color: #fff;
  list-style-type: none;
  padding: 0;
  margin: 130px 0px 130px 0px;
}

.sidebar .list-components a {
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: block;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sidebar .list-components i {
  font-size: 20px;
  margin-right: 15px;
}

.sidebar .list-components li {
  padding: 8px 0px;
}

#about {
  height: 100vh;
}

#about .about-content .picture img {
  height: 140px;
}

#about .about-content .text-content {
  background-color: #0c0c0c;
  padding: 30px;
  border-radius: 20px;
}

#about .about-content .interests .box {
  text-align: center;
}

#about .about-content .interests .box i {
  font-size: 40px;
}

@media (min-width: 768px) {
  #about .about-content .picture {
    margin-right: 80px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  <title>TITLE</title>
</head>

<body>

  <!-- Header -->
  <div class="sidebar">
    <nav>
      <div class="logo">
        <h3>LOGO</h3>
      </div>
      <ul class="list-components">
        <li><a href="#home" class="home"><i class="las la-home"></i>Home</a></li>
        <li><a href="#about" class="about"><i class="las la-user"></i>About</a></li>
        <li><a href="#experience" class="experience"><i class="las la-code"></i>Experience</a></li>
        <li><a href="#contact" class="contact"><i class="las la-comments"></i>Contact</a></li>
      </ul>
      <div class="footer">
        <p>© 2021 FOOTER</p>
      </div>
    </nav>
  </div>

  <!-- Main -->
  <main class="content">

    <!-- About -->
    <section id="about">
      <div class="about-content pad">
        <div class="about-title title">
          <h3>About me</h3>
        </div>
        <div class="separator"></div>
        <div class="row">
          <div class="box">
            <div class="picture"><img src="https://i.pinimg.com/originals/e6/0c/f1/e60cf1b4bbabcef8934efa03329d35de.jpg"></div>
          </div>
          <div class="box">
            <div class="text-content">
              MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE <br>MESSAGE MESSAGE MESSAGE MESSAGE <br> MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE <br> MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE MESSAGE
              <br>
            </div>
          </div>
        </div>
        <div class="separator"></div>
        <div class="interests-title title">
          <h3>Things I like</h3>
        </div>
        <div class="separator"></div>
        <div class="row interests">
          <div class="box">
            <i class="las la-code"></i>
            <p>A</p>
          </div>
          <div class="box">
            <i class="las la-pen"></i>
            <p>B</p>
          </div>
          <div class="box">
            <i class="las la-square-root-alt"></i>
            <p>C</p>
          </div>
          <div class="box">
            <i class="las la-cut"></i>
            <p>D</p>
          </div>
          <div class="box">
            <i class="las la-mug-hot"></i>
            <p>E</p>
          </div>
          <div class="box">
            <i class="las la-cat"></i>
            <p>F</p>
          </div>
          <div class="box">
            <i class="las la-motorcycle"></i>
            <p>G</p>
          </div>
        </div>
      </div>
    </section>

  </main>

</body>

</html>

This is how the 'about' section looks like enter image description here

If I resize the page, it firstly seems like it's working enter image description here

But then if I keep reducing the width, it doesn't collapse to the sidebar anymore enter image description here

If I use phone screen size it starts working again

enter image description here

Sidebar html

<div class="sidebar">
        <nav>
            <div class="logo"><h3>Seo</h3></div>
            <ul class="list-components">
                <li><a href="#home" class="home"><i class="las la-home"></i>Home</a></li>
                <li><a href="#about" class="about"><i class="las la-user"></i>About</a></li>
                <li><a href="#experience" class="experience"><i class="las la-code"></i>Experience</a></li>
                <li><a href="#contact" class="contact"><i class="las la-comments"></i>Contact</a></li>
            </ul>
            <div class="footer"> <p>© 2021 Made with love by me.</p> </div>
        </nav>
    </div>

Scss related to the sidebar ^

.sidebar {
    color: $primaryText;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 40px;
    overflow-y: auto;
    height: 100vh;
    width: 290px;
    transition: all 0.3s;
    position: fixed;
    z-index:5;

    // Media query
    @include media("<=tablet") {
        margin-left: -290px;
    }

    // Nav logo
    .logo {
        font-size: 30px;
        font-weight: 700;
    }

    // Nav components
    .list-components {
        color: $primaryText;
        list-style-type: none;
        padding: 0;
        margin: 130px 0px 130px 0px;
    
        a {
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
            display: block;
            transition: all 0.3s ease-in-out;
        }
    
        i {
            font-size: 20px;
            margin-right: 15px;
        }

        li {
            padding: 8px 0px;

            .home:hover {color: $red;}
            .about:hover {color: $blue;}
            .experience:hover {color: $green;}
            .contact:hover {color: $yellow;}
        }
    
        .la-home {color: $red;}
        .la-user {color: $blue;}
        .la-code {color: $green;}
        .la-comments {color: $yellow;}
    }


    // Footer
    .footer {
        margin-top: auto;
        p {
            color: $tertiaryText;
            font-size: 14px;
        }
    }
}

About section html

<section id="about">
        <div class="about-content pad">
            <div class="about-title title"><h3>About me</h3></div>
            <div class="separator"></div>
            <div class="row">
                <div class="box"><div class="picture"><img src="./assets/images/avatar-seo.png"></div></div>
                <div class="box">
                    <div class="text-content">
                        message message message message message message message message message <br>
                        message message message messagemessage message message <br>
                        message message message messagemessage message message message <br>
                        message message message message <br>
                    </div>
                </div>
            </div>
            <div class="separator"></div>
            <div class="interests-title title"><h3>Things I like</h3></div>
            <div class="separator"></div>
            <div class="row interests">
                <div class="box">
                    <i class="las la-code"></i>
                    <p>Coding</p>
                </div>
                <div class="box">
                    <i class="las la-pen"></i>
                    <p>Design</p>
                </div>
                <div class="box">
                    <i class="las la-square-root-alt"></i>
                    <p>Math</p>
                </div>
            </div>
        </div>
    </section>

Scss related to the html 'about' section ^

#about {
    height: 100vh;

    .about-content {
        .picture {
            img {
                height: 140px;
            }
        }

        .text-content {
            background-color: $darkerColor;
            padding: 30px;
            border-radius: 20px;
        }

        .interests {
            .box {
                text-align: center;

                i {
                    font-size: 40px;
                }
            }
        }

        // Media query
        @include media(">=tablet") {
            .picture {
                margin-right: 80px;
            }
        }
    }
}

Global scss

* {
    box-sizing: border-box;
    font-family: Rubik, sans-serif;
    color: $primaryText;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: $backgroundColor;
    transition: 0.5s;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;

    main {
        margin-left: 290px;
        transition: all 0.3s;

        // Section container
        section {
            padding-top: 110px;

            .pad {
                display: grid;
                justify-content: center;
                padding-right: 20px;
                padding-left: 20px;
            }
        }

        // Global separator
        .separator {
            margin-bottom: 50px;
        }

        p {
            margin: 0;
        }

        // Header title
        h3 {
            margin: 0;
            font-size: 37px;
            white-space: nowrap;
        }

        // Circular profile picture
        .picture {
            img {
                border-radius: 50%;
                height: 110px;
            }
        }

        // Responsive row with boxes
        .row {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .box {
                box-sizing: border-box;
                padding-right: 20px;
            }
        }

        // Media query
        @include media("<=tablet") {
            margin-left: 0px;

            .row {
                flex-flow: wrap;
                justify-content: space-around;

                .box {
                    padding: 10px 10px;
                }
            }
        }
    }

}

As you can see, I tried to put all my elements inside of a row, but I don't know how to make it properly responsive.