JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>


<div id="main">

<div align="center">
<div class="container">

<link rel="stylesheet" type="text/css" href="css/homepage.css">




<div border="1" id="bord" align="center">

<body>


<!-- nav bar -->
<ol id="navbar">

<li><a href="homepage.php">Homepage</a></li>
<li><a href="policy1.php">Policies</a></li>
<li><a href="homemarketing.php">Marketing</a></li>
<li><a href="directory1.php">Staff Directory</a></li>
<li><a href="careers.php">Careers</a></li>
<li><a href="myaccount.php">My Account</a></li>

</ol>
<!-- end of nav bar -->

  
 <!-- start of scroll box -->
 	<div id="scrollbox2">
	<br>
	<h3>
		Hello World
	</h3>

	<br>
	
	</div>
	<br><br>
</div>
<!-- end of scroll box -->


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

<!-- Footer -->

<img src="../intranet/images/footer.png" id="footer"/>

</html>

CSS

#footer{
	position:fixed;
    bottom:0;
    left:0;
    right:0;
    min-width:100%;
	width:100%;
    height:50px;
	opacity:0.8;
}
#main{
   overflow-y: scroll; 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width:600px;   
   
	background-color:#ffffff;
	margin-bottom:50px; 
}

.container{
	width:1344px;
	
}
 
.align-center {
    display: block;
    margin: 1.0em auto;
    text-align: center;
	
	
}