Centering an element between two siblings in flexbox [duplicate] - html

Question

This question already has answers here:
Keep the middle item centered when side items have different widths
(12 answers)
Closed 5 years ago.
My title is being centered inside the flex box content area of my webpage. It's about 30 pixels to the right. Should I change the dimensions of the flex box? If so, how? Advice is greatly appreciated!
a {
outline: 0;
}
body {
background: linear-gradient(to bottom, #1D4350, #A43931);
background-attachment: scroll;
font-family: 'PT Mono', monospace;
}
html,
body,
.wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
.wrapper {
position: relative;
}
.content {
height: 1200px;
}
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.Octagon {
color: #2aa186;
line-height: 30%;
margin-top: 25px;
}
.LT {
color: #3a5454;
line-height: 0;
font-style: italic;
text-align: center;
position: relative;
bottom: 33px;
}
.boi {
position: relative;
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.iob {
position: relative;
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.boi:active,
.iob:active {
top: 3px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
.manyarms,
.colorful {
position: absolute;
margin-top: 30px;
margin-left: 30px;
}
.A1 img {
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
.manyarms,
.A1:hover .colorful {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.A1:hover .manyarms,
.colorful {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.A2 img {
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
.sensible,
.A2:hover .BlueBoi {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.A2:hover .sensible,
.BlueBoi {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.sensible,
.BlueBoi {
margin-top: 30px;
margin-right: 20px;
right: 10px;
position: absolute;
}
.VS {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.verr {
padding-left: 31px;
padding-top: 263px;
}
.special {
padding-right: 71px;
padding-top: 263px;
}
.footer {
bottom: 0;
left: 0;
margin-right: 10px;
position: fixed;
text-align: right;
width: 100%;
}
<div class="wrapper">
<div class="header">
<a href="https://www.google.com/?gws_rd=ssl" target="_blank" style="text-decoration: none;">
<p class="iob">Information</p>
</a>
<h1 class="Octagon">The Pragmatic Octopus</h1>
<a href="https://www.google.com/?gws_rd=ssl" style="text-decoration: none;" target="_blank">
<p class="boi">Contact</p>
</a>
</div>
<p class="LT">Certes</p>
<div class="content">
<div class="A1">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792.jpg" alt="hecc" style="width:310px; height:250px;" class="manyarms">
<img src="https://s-media-cache-ak0.pinimg.com/736x/de/71/29/de71292c5df818b418fe09cbca9c49c2.jpg" alt="hecc2" style="width:310px; height:250px;" class="colorful">
</div>
<div class="A2">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="hecc3" style="width:310px; height:250px;" class="sensible">
<img src="http://img03.deviantart.net/a0a6/i/2010/007/6/4/octopus_by_mnk7.jpg" alt="hecc4" style="width:310px; height:250px;" class="BlueBoi">
</div>
<div class="VS">
<p style="color: #6458b7;" class="verr">Here comes a very special boi!</p>
<p style="color:#6458b7;" class="special">He loves to pose for photos!</p>
</div>
</div>
<div class="footer">
©Hecc™®
</div>
</div>

Answer 1

Here's the code you're using to align your flex items:
.header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
With space-between the "Information" and "Contact" elements will be positioned at opposite edges of the container.
Because a flex container aligns items based on the distribution of free space, your middle item will be centered between them, not necessarily centered on the page.
With "Information" having a computed width of 174px, and "Contact" having a computed width of 135px, the middle item is off-center by 39px.
In order for the middle item to be centered on the page, its siblings would need to be equal width, so there is an equal balance of space on both sides.
The following post has two methods for centering items in a flex container when siblings vary in size:
Methods for Aligning Flex Items along the Main Axis (see box #71)