How can I solve this html CSS positioning issue

I am trying to create header, left nav, content area, right nav and footer. But my content area is streching and right nav is underneath content area. I want right nav to be underneath header. And only content area should stretch or narrowed while resizing window. Left nav and Right nav I want is fixed size. How can I solve this issue? I am new in css. Thank you in advance.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    body {
      min-height: 100%;
      position: relative;
      padding: 0;
      margin: 0;
    }
    
    .header {
      background-color: navy;
      color: white;
      position: fixed;
      z-index: 1;
      height: 30px;
      width: 100%;
    }
    
    .main {
      position: relative;
      top: 30px;
    }
    
    .content {
      position: relative;
      left: 230px;
    }
    
    .left-navbar {
      background: steelblue;
      position: fixed;
      top: 30px;
      height: 100%;
      width: 230px;
      z-index: 2;
    }
    
    .content-area {
      position: relative;
      background: aqua;
    }
    
    .right-sidebar {
      position: fixed;
      background: lightblue;
      right: 0;
      height: 100%;
      width: 230px;
      z-index: 3;
    }
    
    .footer {
      background: yellow;
      position: relative;
    }
  </style>
</head>

<body>
  <div class='app'>
    <div class='header'>
      Header
    </div>
    <div class='main'>
      <div class='left-navbar'>
        Left Sidebar
      </div>
      <div class='content'>
        <div class="content-area">
          Content Area
        </div>
        <div class='right-sidebar'>
          Right Sidebar
        </div>
        <footer class='footer'>
          Footer
        </footer>
      </div>
    </div>
    </div>
</body>

</html>

I solved it like below. Can someone say me that it's standard solution or not? Thanks

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    body {
      min-width: 100%;
      padding: 0;
      margin: 0;
      height: 100%;
    }

    header {
      background-color: blue;
      color: white;
      position: fixed;
      width: 100%;
      height: 35px;
      z-index: 1;
    }

    .left-nav {
      background-color: yellow;
      position: fixed;
      top: 35px;
      width: 230px;
      height: 100%;
      z-index: 2;
    }

    .right-sidebar {
      background-color: aqua;
      position: fixed;
      top: 35px;
      right: 0;
      width: 230px;
      height: 100%;
      z-index: 3;
    }

    .content {
      position: absolute;
      top: 35px;
      left: 230px;
      right: 230px;
      width: auto;
    }

    .main {
      background-color: darkgreen;
    }

    footer {
      background-color: darkred;
    }

  </style>
</head>
<body>
  <header>
    Header
  </header>
  <nav class="left-nav">
    Left Navbar
  </nav>
  <div class="right-sidebar">
    Right Sidebar
  </div>
  <div class="content">
    <div class="main">
      <p>The header will stick to the top when you reach its scroll position. The header will stick to the top when you reach its scroll position. The header will stick to the top when you reach its scroll position.</p>
    </div>
    <footer>
      Footer
    </footer>
  </div>
</body>
</html>

Solution

You have to move this block of code

<div class="right-sidebar"> 
</div>

in between the left-navbar class and the content class

Like this

<div class='main'>
            <div class='left-navbar'>
                Left Sidebar
            </div>

            <div class='right-sidebar'>
                Right Sidebar
            </div>
            
            <div class='content'>

                <div class="content-area">
                    Content Area
                </div>

                <footer class='footer'>
                    Footer
                </footer>

            </div>
            
        </div>

body {
            min-height: 100%;
            position: relative;
            padding: 0;
            margin: 0;
        }

        .header {
            background-color: navy;
            color: white;
            position: fixed;
            z-index: 1;
            height: 30px;
            width: 100%;
        }

        .main {
            position: relative;
            top: 30px;
        }

        .content {
            position: relative;
            left: 230px;
        }

        .left-navbar {
            background: steelblue;
            position: fixed;
            top: 30px;
            height: 100%;
            width: 230px;
            z-index: 2;
        }

        .content-area {
            position: relative;
            background: aqua;
        }

        .right-sidebar {
            position: fixed;
            background: lightblue;
            right: 0;
            height: 100%;
            width: 230px;
            z-index: 3;
        }

        .footer {
            background: yellow;
            position: relative;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>

<body>
    <div>
        <div class='header'>
            Header
        </div>

        <div class='main'>
            <div class='left-navbar'>
                Left Sidebar
            </div>

            <div class='right-sidebar'>
                Right Sidebar
            </div>
            
            <div class='content'>

                <div class="content-area">
                    Content Area
                </div>

                <footer class='footer'>
                    Footer
                </footer>

            </div>
            
        </div>
    </div>
</body>

</html>