Yes you can lose all the absolute positioning and transforms and just centre it with flex.
e.g.
.navigation {
background:rgba(10,10,10);
width: 220px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
text-align: right;
display:flex;
flex-direction:column;
justify-content:center;
}
.navigation ul {
list-style-type: none;
margin:0;
padding:0;
/*
top: 50%;
-webkit-transform: translateX(35%) translateY(-50%);
transform: translateX(35%) translateY(-50%);
position: absolute;
*/
}
I couldn’t see what you meant unless this a specific browser issue?
The feature wrapper is wider than the 3 30% boxes and you have a margin-right on the last one also.
I would use justify-content;space-between instead and remove the right margin from the feature.
e.g.
.features-wrapper {
display: flex;
justify-content:space-between;
}
.feature {
flex: 0 0 30%;
max-width: 50%;
text-align: center;
margin: 20px 0x 0 0;
background-color: #F2F2F2;
}
I’m not quite sure what you mean as the footer is visible but it’s not quite placed correctly. You also have a p element inside the footer that has a 50px top margin. Indeed you give a 50px top margin to all p elements which is unlikely to be what you want.
i.e. you have this:
p {
margin: 50px 0 0;
padding: 0 193px;
color: #F2F2F2;
}
You can remove the margin from the p in the footer but I would suggest you set a better default style for the p as it is unlikely that every p on your site will need a 50px top margin.
Here’s the code for the footer anyway.
.page-footer p{
margin:0
}
However that won’t be on the bottom of the section because you have absolutely placed it in relation to the container which does not carry the full height. You really need a better method such as using flex all the way through to achieve a footer on the bottom if that’s what you were after? Or remove the position:relative from .container and place it on the section and then the absolute footer will be on the bottom of that section.
If you meant you always want it at the bottom at all times then you would need to use position:fixed instead of absolute.
Use flex to centre them.
e.g.
.social-links {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
}
That’s not so easy and it is also ambiguous whether you want the content centred in the remaining space from the heading to the bottom of that section or whether you want the text centred irrespective of the heading occupying some space? The point being that the latter is not achievable automatically.
You can have the h2 heading as per normal and then centre the remaining text in the available vertical space using flexbox again. You will have to do this on a case by case basis as this breaks the nav code I gave you but here is the general routine.
section{
display: flex;
flex-direction: column;
}
.container{
display: flex;
flex-direction: column;
flex:1 0 0%;
}
.container > *{margin:auto;}
.container > h2{margin:1rem 0;}
I suggest you add classes to the sections and only add that code to the specific items (e.g. not the nav item as we have already centred that). You may also need to define the inner content as sometimes you use p elements and sometimes divs. However the logic is as described above.
That wont solve all the problems and will need some tweaking but should sow the logic needed.
[edit]
I made a few extra tweaks but its best if you look at the forked codepen instead.
It’s not meant to be perfect but shows you how to centre things vertically and should help with your task.
[/edit]