positioning div elements inside each other - html

Question

There is a weird downward shift of the div's on both sides of the page. Definitely something to do with relative and absolute positioning. I've heard a lot about setting the elements width and height when working with position:absolute and relative but no luck.
Is there a better way of positioning these containers inside each other also, all padding and margin is 0px (stated in body tag).
What it's supposed to look like: !https://imgur.com/a/Yol1Kf8
What I have made so far: !https://imgur.com/a/u4zU4iA
CSS:
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
}
.apps-container {
position: absolute;
height: 617px;
background-color: black;
}
#monthly-leaderboard {
right: 50px;
top: 50px;
}
#tournament-board {
width: 800px;
top: 50px;
left: 50px;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header {
height: 85px;
}
#tournament-header {
width: 100%;
height: 85px;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#monthly-content {
width: 286px;
}
#tourn-content {
width: 780px;
}
HTML:
<div id="mid-section-container">
<div id="monthly-leaderboard" class="apps-container">
<div id="monthly-leaderboard-header" class="boards-container-nav">
<h1>Monthly Leaderboard</h1>
</div>
<div id="monthly-content" class="apps-content-container">
<div id="monthly-content-header" class="boards-content-nav">
<ul>
<li>Rank</li>
<li>User</li>
<li>Wins</li>
</ul>
</div>
<p>content goes here.</p>
<p>and here.</p>
</div>
</div>
<div id="tournament-board" class="apps-container">
<div id="tournament-header" class="boards-container-nav">
<ul>
<li>Current</li>
<li>Upcoming</li>
</ul>
</div>
<div id="tourn-content" class="apps-content-container">
<div id="tourn-content-header" class="boards-content-nav">
<ul>
<li>Platform</li>
<li>Torunament</li>
<li>Start Time</li>
<li>Teams</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

Try this one it is help full
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
}
.apps-container {
position: absolute;
height: 617px;
background-color: black;
}
#monthly-leaderboard {
right: 50px;
top: 50px;
}
#tournament-board {
width: 800px;
top: 50px;
left: 50px;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header h1{
margin: 0;
padding: 10px 10px;
color: #FFF;
}
#tournament-header {
width: 100%;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#monthly-content {
width: 286px;
}
#tourn-content {
width: 780px;
}
ul li {
display: inline-block;
width: auto;
}
ul li a{
color: #FFF;
}
ul li {
color: #FFF;
}
#tournament-header ul li a{
padding: 10px 20px;
}
#tourn-content-header ul li{
padding: 10px 20px;
}
#monthly-content-header ul li{
padding: 10px 20px;
}
#monthly-content-header{
background-color: #404040;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#tourn-content-header{
background-color: #404040;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
<div id="mid-section-container">
<div id="monthly-leaderboard" class="apps-container">
<div id="monthly-leaderboard-header" class="boards-container-nav">
<h1>Monthly Leaderboard</h1>
</div>
<div id="monthly-content" class="apps-content-container">
<div id="monthly-content-header" class="boards-content-nav">
<ul>
<li>Rank</li>
<li>User</li>
<li>Wins</li>
</ul>
</div>
<p>content goes here.</p>
<p>and here.</p>
</div>
</div>
<div id="tournament-board" class="apps-container">
<div id="tournament-header" class="boards-container-nav">
<ul>
<li>Current</li>
<li>Upcoming</li>
</ul>
</div>
<div id="tourn-content" class="apps-content-container">
<div id="tourn-content-header" class="boards-content-nav">
<ul>
<li>Platform</li>
<li>Torunament</li>
<li>Start Time</li>
<li>Teams</li>
</ul>
</div>
</div>
</div>
</div>

Answer 2

there is a unnecessary use of position:absolute; i have made changes in your code and removed unwanted css.
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
display:flex;
}
.apps-container {
height: 617px;
background-color: black;
}
.boards-container-nav {
background-color: #363636;
border-bottom: solid 2px #25b6e6;
}
#monthly-leaderboard-header {
height: 85px;
}
#tournament-header {
width: 100%;
height: 85px;
}
.apps-content-container {
height: 80%;
margin: 0px 10px;
background-color: #252525;
border-radius: 7px;
}
#tournament-board {
width: 70%;
}
#monthly-leaderboard {
width: 30%;
margin-left:20px;
}
<div id="mid-section-container">
<div id="tournament-board" class="apps-container">
<div id="tournament-header" class="boards-container-nav">
<ul>
<li>Current</li>
<li>Upcoming</li>
</ul>
</div>
<div id="tourn-content" class="apps-content-container">
<div id="tourn-content-header" class="boards-content-nav">
<ul>
<li>Platform</li>
<li>Torunament</li>
<li>Start Time</li>
<li>Teams</li>
</ul>
</div>
</div>
</div>
<div id="monthly-leaderboard" class="apps-container">
<div id="monthly-leaderboard-header" class="boards-container-nav">
<h1>Monthly Leaderboard</h1>
</div>
<div id="monthly-content" class="apps-content-container">
<div id="monthly-content-header" class="boards-content-nav">
<ul>
<li>Rank</li>
<li>User</li>
<li>Wins</li>
</ul>
</div>
<p>content goes here.</p>
<p>and here.</p>
</div>
</div>
</div>

Answer 3

Please update following css into your existing css. just add max-width: 1250px; you want. and margin: 0 auto;
#mid-section-container {
position: relative;
height: 800px;
width: 100%;
background-color: white;
max-width: 1250px;
margin: 0 auto;
}

Answer 4

add css
#mid-section-container{
display:flex;
}
#monthly-leaderboard{
width:70%;
height:100%;
}
#tournament-board{
width:30%;
height:100%;
}
also add relevant properties of flex
may be this is the best way to position divs