How to safely edit this 3 column flex layout

I need to edit this layout I found on internet but it is in CSS flex and I know nothing about flex, but only normal old css.

How to edit it safely without damaging the code?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  margin: 0;
  padding: 0;
  font-size: 30px;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: white;
}

.header,
.footer {
  flex: 0 0 50px;
  background: #34495e;
}

.content-body {
  /*   flex: 1 1 auto; */
  flex-grow: 1;
  /* equla to: height: calc(100vh - 100px); */
  display: flex;
  flex-direction: row;
}

.content-body .content {
  /*   flex: 1 1 auto; */
  flex-grow: 1;
  /* width: calc(100% - 200px); */
  overflow: auto;
  background: #1abc9c;
}

.content-body .sidenav,
.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .sidenav {
  background: #e74c3c;
}

.content-body .ads {
  background: #e67e22;
}

<!-- language: lang-html -->

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <nav class="sidenav">This must be deleted</nav>
    <main class="content">Content</main>
    <aside class="ads">Aside</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

<!-- end snippet -->

I also created a Codepen
https://codepen.io/familias/pen/WNYQeqQ

What I need is:
to safely delete the left sidebar, marked with the text "This must be deleted" and leave middle part like this:
<main class="content">Content</main>
100% width
<aside class="ads">Aside</aside>
100px width

I tried myself but it does not displayed good on mobile device

Just delete the sidenav element and the associated css. The propoerty flex: 0 0 100px sets the flex-grow to 0 (i.e. don't grow) and flex-shrink to 0 (i.e. don't get smaller, and the flex-basis to 100px, i.e. keep it at 100px wide.

Here's an explainer on CSS tricks

This video by Kevin Powell is a good starter for flexbox.

Hope this helps.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  margin: 0;
  /*padding: 0; body has no padding by default so removed this*/
  font-size: 30px;
  text-align: center;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: white;
}

.header,
.footer {
  flex: 0 0 50px;
  background: #34495e;
}

.content-body {
  /*   flex: 1 1 auto; */
  flex-grow: 1; /* equla to: height: calc(100vh - 100px); */
  display: flex;
  /*flex-direction: row;  this is default so removed it */
}

.content-body .content {
  /*   flex: 1 1 auto; */
  flex-grow: 1; /* width: calc(100% - 200px); */
  overflow: auto;
  background: #1abc9c;
}

.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .ads {
  background: #e67e22;
}

<!-- language: lang-html -->

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <main class="content">Content</main>
    <aside class="ads">Aside</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

<!-- end snippet -->