Absolutely positioned element falling outside of its parent container - html

Question

I'm working on a project where I need to float the previous and next navigation elements to either side of a blog archive page title (green circles for this example). Sitting inside the green circle will be a span with an SVG background element - so the circle needs to be positioned.
I wanted to keep things semantic, so I've laid out my page (section) header as follows:
<header class="archive-box">
<nav class="archive-nav">
<div class="left-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
<div class="right-nav">
<a class="icon-bg" href="#" title="">
</a>
</div>
</nav>
<h2>Stuff and Things</h2>
</header>
CSS
.archive-box {
max-width: 900px;
height: 75px;
margin: 50px auto;
border: 1px solid;
position: relative;
}
.archive-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.left-nav {
position: absolute;
left: 0;
}
.right-nav {
position: absolute;
right: 0;
}
.icon-bg {
background-color: #9ccb3b;
border-radius: 50%;
height: 75px;
width: 75px;
position: absolute;
}
h2 {
text-align: center;
}
The right navigation element is going outside of its parent's container. I think it might have something to do with the fact that I've got multiple parent-child absolute elements. Is there another way to do this?
Here's the CodePen

Answer 1

Sometimes you need to have specific order of coding css positions. What i mean is if you paste the whole code and run it, it will be different if you wrote it step by step and saved it. It helped me couple of times when i was learning css.
Also try to put margin:auto in .right-nav and .left-nav

Answer 2

Is this how you want it to be? CodePen. Instead of using position: absolute, I've used float: left and float: right so that the left and the right menu items are positioned on the left and the right side respectively and the title is in the center.
section {
position: relative;
background-color: blue;
color: white;
width: 80%;
margin: auto;
}
article {
background-color: green;
height: 50px;
}
h1 {
color: white;
font-size: 30px;
}
nav {
top: 0;
font-size: 20px;
}
.left {
left: 0;
/* position: absolute; */
color: yellow;
}
.right {
right: 0;
/* position: absolute; */
color: pink;
}
h1 {
text-align: center;
}
.bg {
float: left
}
.bgtwo {
float: right;
}
<section>
<nav>
<div class="bg">
<div class="left">LEFT</div>
</div>
<div class="bgtwo">
<div class="right">RIGHT</div>
</div>
</nav>
<h1>Hello There</h1>
<article>
<p>Here is some stuff about things.</p>
</article>
</section>