У меня есть канал социальной сети Facebook и канал социальной сети Twitter, расположенные рядом друг с другом, однако канал Twitter не достигает нижней части раздела и поэтому не соответствует каналу Facebook. Как мне go исправить это?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=186952699372427&autoLogAppEvents=1"></script>
<div class="block__73694 saddam-main">
<div class="socialMediaContainer">
<div id="fb-root"></div>
<script async="1" defer="1" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-md-12 offset-md-0 col-sm-8 offset-sm-2">
<div class="totalrowsadam">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 marsaddam">
<div class="saddam1">
<div class="fb-page" data-href="https://www.facebook.com/Facebook/" data-small-header="" data-adapt-container-width="1" data-hide-cover="" data-show-facepile="" data-show-posts="true" data-width="600"><blockquote cite="https://www.facebook.com/Facebook/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Facebook/">Facebook</a></blockquote>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="saddam2">
<div id="twitter">
<a class="twitter-timeline" data-width="100%" data-height="100%" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
/*Social Media */
.socialMediaContainer{
display: flex;
flex-direction: row;
justify-content: space-around;
height: 50vh;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
align-items: stretch;
}
.fb-page{
width: 300px;
margin: auto;
}
Файл также содержит bootstrap .min. css, но он слишком большой, чтобы я мог оставлять сообщения.