I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly.
Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within the container (like the example shown).
Can anyone spot where I might be going wrong?
#site-wrapper {
background: #ececec;
}
.site-wrapper-inner {
overflow: hidden;
position: relative;
background: #fff;
}
.site-wrapper-inner.contained {
max-width: 1500px;
}
.container {
margin: 0 auto;
width: 100%;
}
header .container,
main .container {
position: relative;
padding: 0 30px;
max-width: 1118px;
}
header.hero {
position: relative;
clear: both;
overflow: hidden;
height: 340px;
margin-bottom: 50px;
display:flex;
align-items:center;
}
.container.hero-center {
text-align: center;
max-width: 560px;
}
.breadcrumbs {
color: rgba(255,255,255,0.7);
font-size: 0.8em;
align-self: flex-start;
text-align: right;
position: absolute;
top: 25px;
right: 0;
}
.breadcrumb-bg {
padding: 0.2em 1em;
background: rgba(19,71,91,0.7);
display: inline-block;
border-radius: 0.25em;
}<div id="site-wrapper">
<div class="site-wrapper-inner container contained">
<main id="main">
<section>
<header class="hero" style="background:#ccc;">
<div class="breadcrumbs container"><div class="breadcrumb-bg">Breadcrumb</div></div>
<div class="hero-center container">
<h1>Center Aligned Content</h1>
</div>
</header>
</section>
</main>
</div>
</div>
<h1>Without Breadcrumb</h1>
<div id="site-wrapper">
<div class="site-wrapper-inner container contained">
<main id="main">
<section>
<header class="hero" style="background:#ccc;">
<div class="hero-center container">
<h1>Center Aligned Content</h1>
</div>
</header>
</section>
</main>
</div>
</div>