This is an example of a basic HTML structure:
<section id="teasers">
<div class="wrapper">
<a href="">
<div class="redbox">
<h2 class="two-lines uppercaseme lowercaseme">Behind the Scenes<br/>
<span class="lowercaseme">A look at studio life</span>
</h2>
<div class="clearfix"></div>
</div>
</a>
</div>
</section>
Here is the accompanying CSS code:
.redbox {
padding: 0 55px;
display: flex;
align-items: center;
justify-content: flex-start;
}
#teasers h2 {
float: left;
margin: 7% 0;
}
An issue can be observed HERE when the screen size is reduced to below 992px.
Essentially, using flex property results in a purple border around the H2 tag within .redbox. If you inspect and remove display: flex in the dev tools, the purple border disappears. Why does this happen?
Is this a common problem and what are the possible solutions for it?