While watching a tutorial today where someone was creating a website using Bootstrap 4, I noticed that they applied both 'row' and 'container' as classes for the same div. This goes against Bootstrap documentation, which states that they should be nested within each other. Surprisingly, it seemed to work fine in the video. Curious, I tried replicating it in my own test document, but found that the 'container' class failed to centralize the div. The code from the tutorial did not yield the same results for me. Can anyone shed light on why this discrepancy exists? Here's the non-working code snippet I used:
<div class="container row">
<div class="col-md-6 d-flex justify-content-center align-items-center" style="background-color: steelblue;height:50vh;">
<h1 class="d-inline-block" style="outline: 1px solid red;">Some text</h1>
</div>
<div class="col-md-6" style="background-color: pink;height:50vh;"></div>
</div>