Currently, I am delving into the world of CSS and grappling with a particular behavior that has caught my attention.
section{
display: flex;
flex-direction: column;
align-items: center;
}
.banner-area a.banner-btn{
padding: 15px 35px;
background: crimson;
}
.banner-area {
text-align: center;
}<section class="banner-area">
<div class="banner-img"></div>
<h1>Flexbox Website</h1>
<h3>Responsive Web Design</h3>
<a href="#" class="banner-btn">Contact us</a>
</section>While experimenting with the CSS properties, I made an intriguing observation - removing align-items: center caused the element to expand across the entire line. The reason behind this change eluded me, so I seek assistance in comprehending the underlying logic. Any insights would be greatly appreciated. Thank you!