Update: I believe my code is correct, the skew just caused a slight distortion haha. Apologies for any confusion.
I usually consider myself proficient in CSS, but this particular challenge has me questioning that...
.creative-container {
background: red;
display: flex;
flex-flow: column nowrap;
transform: skew(-12deg);
width: 100%;
margin: 0 auto;
}
.creative-container .header-section {
display: flex;
flex-flow: row nowrap;
height: 260px;
}
.creative-container .header-section .brand-square {
width: 350px;
min-width: 350px;
max-width: 350px;
background: yellow;
}
.creative-container .header-section .header-text {
padding-left: 60px;
text-align: left;
color: white;
transform: skew(12deg);
}
.creative-container .header-section .header-text h1 {
font-weight: 900;
font-size: 4em;
}
.creative-container .header-section .header-text h2 {
font-family: Lora,serif!important;
font-size: 1.2em;
font-weight: 400;
}<div class="creative-container">
<div class="header-section">
<div class="brand-square"></div>
<div class="header-text">
<h1>Our Work</h1>
<div class="brand-line-break"></div>
<h2>Creativity fuels our projects, each one crafted with passion and expertise to deliver exceptional results.</h2>
</div>
</div>
<div class="projects"></div>
</div>The colors are temporary placeholders, but can anyone explain why my yellow square (`.brand-square`) is not adhering to the maximum width attributes? Upon inspecting the element, I can't identify anything interfering with the styles.
My assumption is that somehow flexbox is influencing those values, but I'm struggling to pinpoint how.
Any insights would be greatly appreciated. Thank you!