Alinhar itens que não funcionam Flex
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Concerned Cow
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}<style>
.row {display:flex;}
.col {flex:1;}
</style>
<div class="row">
<div class="col content">some content</div>
<div class="col content raw">some other content</div>
</div>// add width to 100% inside flex wrapper dive
<div class="d-flex p-2">
<div class="profile-avatar mr-2">
<img class="avatar-img" src="/images/Avatar" alt="avatar">
</div>
<div class="w-100">
<div class="d-flex mb-1">
<h6 class="text-truncate mb-0 mr-auto">Name</h6>
<p class="small text-muted text-nowrap last-updated" datetime="Timestamp"></p>
</div>
<div class="text-wrap text-break p-1 message">message.Content</div>
</div>
</div>