Margin makes Bootstrap 5 column exceed 100vh height - html

Question

I'm trying out Bootstrap 5 with a simple webpage where I have one row with two columns. The left column is fine but the right one is acting funny. The webpage is supposed to be full screen with no scroll. But whenever I put margin in an element inside the right column then the whole column increases in height and goes beyond 100vh/100%. I want content-right-inner class to have margin of 50px all around. If I delete min-height then all item moves to the top. I want it to be full screen size with margin. How can I do that?
Here's the code:
*,
*:before,
*:after {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.7;
font-size: 1.6rem;
background-color: #fff;
color: #000;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0px;
}
button,
input {
overflow: visible;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.row>* {
padding-right: 0;
padding-left: 0;
}
.main {
background-color: green;
max-height: 100vh;
}
.content-left{
height: 100vh;
padding: 0;
color: #fff;
background-color: red;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.content-right{
background: blue;
}
.content-right-inner{
margin: 50px;
position: relative;
min-height: 100vh;
}
.logo p{
font-family: Lato-Light;
font-size: 1.5rem;
color: #F7A14C;
font-weight: 600;
}
.main-content{
position: absolute;
left: 0;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.social-box{
margin: 0 10px 0px 15px;
float: left;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main">
<div class="container-fluid position-relative h-auto p-0 overflow-hidden">
<div class="row">
<section class="content-left col-xs-12 col-lg-6">
<div class="inner-container">
<p>Boom Boom</p>
</div>
</section>
<section class="content-right col-xs-12 col-lg-6">
<div class="content-right-inner">
<div class="logo text-center">
<p>test</p>
</div>
<div class="main-content">
<h1>Lorem Ipsum!</h1>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum.</p>
<p>Lorem Ipsumsdfafafafafa!</p>
<button>Lorem Ip</button>
</div>
<div class="social-icons">
<div class="social-box">
<i class="fab fa-facebook-f"></i>
</div>
<div class="social-box">
<i class="fab fa-twitter"></i>
</div>
<div class="social-box">
<i class="fab fa-linkedin-in"></i>
</div>
<div class="social-box">
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</section>
</div>
</div>
</section>

Answer 1

Found a fix for the issue. Putting margin all around and especially at the bottom made the container exceed it's height of 100vh. To fix it I just used calc() in .content-right-inner.
Here's the code:
.content-right-inner{
position: relative;
margin: 50px;
height: 95vh;
height: calc(100vh - 100px);
}
I guess that just deducts the extra height which came from a margin of 50px.