White border between flex items - html

Question

So I create a container div, then I create a top and bottom div, in the bottom I create 2 more divs, to put separeted items, but, in the middle of them it's a border that a didn't put there, I tried the same code only with divs (whitout text) to see, and it didn't has the border in the middle of them, so, anyone knows why?
Here's my code:
<div class="container">
<div class="top-text">
<h1>Join our community</h1>
<h3>30-day, hassle-free money back guarantee</h3>
<p>Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.</p>
</div>
<div class="bottom-text">
<div class="month-sub">
<h3 class="month-sub-title">Monthly Subscription</h3>
<p class="p-dollar"><span class="dollar">&dollar;29</span> per month</p>
<p>Full access for less than &dollar;1 a day</p>
<button class="btn-sign">Sign Up</button>
</div>
<div class="why-us">
<h3 class="why-us-title">Why Us</h3>
<ul class="specs">
<li>Tutorials by industry experts</li>
<li>Peer & expert code review</li>
<li>Coding exercises</li>
<li>Access to our GitHub repos</li>
<li>Community forum</li>
<li>Flashcard decks</li>
<li>New videos every week</li>
</ul>
</div>
</div>
</div>
.container{
width: 44%;
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border-radius: 10px;
}
.top-text{
background-color: #ffffff;
padding: 35px;
color: var(--cyan);
}
.bottom-text{
display: flex;
justify-content: center;
width: 100%;
color: #ffffff;
}
.month-sub{
width: 50%;
padding: 35px;
background-color: var(--cyan);
}
.why-us{
width: 50%;
padding: 35px;
background-color: var(--grayishBlue);
}
The border
The div I create with the same things, but didn't have the border

Answer 1

I guess it can be due to wrong use of flexbox. If you use display: flex; you shoul use flex: 0 1 50%; in child to benefit from it.
.parent{
display: flex;
}
.child{
//this
flex: 0 1 50$;
//is equivalent of this
flex-grow: 0
flex-shrink: 1;
flex-basis: 50%;
}
My second guess it's box-sizing or some styles are being inherited...
Anyway maybe it'll help you
https://codepen.io/jerrykck/pen/eYZbpGN