Responsive Static Bars Top/Bottom

I am having a simple problem with getting the bars to be both static and responsive on resizing. I am using bootstrap 5. I would like them to stay within the Orange box and to have them at the top and bottom as I will be adding buttons to the top.

I have included a codepen link to show. I would like it to look like a mobile app when viewing on the phone and have the orange box in the middle on larger devices.

Summary: How do I get the top and bottom bars to be static and responsive to stay in the orange box?

HTML

<div class="Main container">
    <div class="R row ">
        <div class="TopBar col-12 px-0">
        <img src="images/TopBar.png"class="img-fluid ">
        </div>
    </div>

body

CSS

{
background-image: url('images/wbg.jpg');
background-position: center top;

}
.Main {
border: 5px solid white;

background-image: url('images/ob.jpg');
background-position: center top;
background-size: 100% auto;
max-width: 800px;
box-shadow: 2px 3px 8px 0px #a09999;
position: relative;

}
.TopBar
{
 position:fixed;
top:0;
width:85.3%;
max-width: 800px;
}

.BottomBar
{
position:fixed;
bottom:-3px;
width:85.3%;
max-width: 800px;
}

https://codepen.io/PapaDeBeau/pen/MYgyBRJ

How do I get the codepen to show up as a working example and not just a link?

Solution

Remove the width:85.3%; from the top and bottom bar. This will "solve" your problem because the row is already at the container size.
But, this is not a correct bootstrap build. You don't have to override the withs of containers, rows or columns like this. It just mess things up. Also, look the documentation and use the classes available, if you dont know them yet, try using the search with the css property, and you'll find the bootstrap option.
I've made a version of it using some other bootsrap classes.

body {
    background-image: url('https://PrayTheRosary.com/tb/images/wbg.jpg');
    background-position: center top;
}

.bg-image {    
    background-image: url('https://PrayTheRosary.com/tb/images/ob.jpg');
    background-position: center top;
    background-size: 100% auto;
    box-shadow: 2px 3px 8px 0px #a09999;
}

.rotate-180 {
  transform: rotate(180deg)
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="position-fixed top-0 w-100">
    <div class="container border border-bottom-0 border-white border-5">
      <div class="row">
        <div class="col-12 px-0">
          <img class="w-100 img-fluid" src="https://PrayTheRosary.com/tb/images/TopBar.png">
        </div>
      </div>
    </div>
  </div>
     <div class="container border border-5 border-white bg-image">
         
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
  
  <div class="position-fixed bottom-0 w-100">
    <div class="container border border-top-0 border-white border-5">
      <div class="row">
        <div class="col-12 px-0">
          <img class="rotate-180 w-100 img-fluid" src="https://PrayTheRosary.com/tb/images/TopBar.png">
        </div>
      </div>
    </div>
  </div>
</body>