I am experimenting with Bootstrap 5 on a simple webpage that contains one row with two columns. The left column is working correctly, but the right column is causing some issues. I want the webpage to be full-screen without any scrolling. However, whenever I add margin to an element inside the right column, the entire column's height increases and goes beyond 100vh/100%. Specifically, I want the content-right-inner class to have a margin of 50px all around. Deleting the min-height property causes all items to move to the top. How can I achieve a full-screen size with margins?
Here is the code snippet:
*,
*: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>