CSS Not centering it correctly - html

Question

I'm having a bit of trouble trying to center my div class= content onto the middle right under the word freedom. Any help? I also have an image provided here https://gyazo.com/8a38955c74369034a014b20ed8e5d31d
HTML
<p id="einz" style="color: rgb(255, 255, 255);">
<!--marquee direction="right" speed="1" onmouseover="this.stop();" onmouseout="this.start();"-->
[ <a id="einz" href="bla bla bla" target="blank" rel=noopener>discord</a> /
<a id="einz" href="bla bla bla" target="blank" rel=noopener>steam</a> /
<a id="einz" href="bla bla bla" target="blank" rel=noopener>youtube</a> /
<a id="einz" href="bla bla bla" target="blank" rel=noopener>github</a> ]
CSS
```#einz
{
text-align: center;
font-weight: normal;
font-family: 'Courier', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,100), 1px 1px 1px rgba(0,0,0,100);
margin: 0 auto;
z-index: 1;
font-size: 12px;
}

Answer 1

Following your CodePen demo, you have to put the freedom text and links in a wrapper and then center the wrapper in order to keep the respectiveness to the text and links. Further on, since you wanted the links to the bottom-right of the freedom text, the links had to be put in a wrapper as well. Since you wanted the links on two different levels, I'd recommend using blocks to force a new line rather than <br>. You should also refrain from using the style attribute when the element has a class that you can alter. You should also not use similar id attributes more than once, you should refer to using classes instead.
/* temporary code to not blind the view */
body { background: pink }
#freedom-wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -220px;
}
#freedom-links-wrapper {
float: right;
}
.freedom-links {
color: rgb(255, 255, 255);
font-weight: normal;
font-size: 12px;
font-family: 'Courier', sans-serif;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,100),
1px 1px 1px rgba(0,0,0,100);
line-height: 18px;
z-index: 1;
}
.glitch {
color: white;
font-size: 100px;
z-index: 1;
}
/* old code */
#keyframes noise-anim {
0% {
clip-path: inset(87% 0 4% 0);
}
5% {
clip-path: inset(3% 0 43% 0);
}
10% {
clip-path: inset(82% 0 4% 0);
}
15% {
clip-path: inset(41% 0 2% 0);
}
20% {
clip-path: inset(96% 0 5% 0);
}
25% {
clip-path: inset(57% 0 35% 0);
}
30% {
clip-path: inset(78% 0 4% 0);
}
35% {
clip-path: inset(100% 0 1% 0);
}
40% {
clip-path: inset(99% 0 1% 0);
}
45% {
clip-path: inset(46% 0 49% 0);
}
50% {
clip-path: inset(16% 0 8% 0);
}
55% {
clip-path: inset(16% 0 72% 0);
}
60% {
clip-path: inset(19% 0 80% 0);
}
65% {
clip-path: inset(8% 0 9% 0);
}
70% {
clip-path: inset(88% 0 6% 0);
}
75% {
clip-path: inset(32% 0 30% 0);
}
80% {
clip-path: inset(46% 0 47% 0);
}
85% {
clip-path: inset(78% 0 21% 0);
}
90% {
clip-path: inset(60% 0 9% 0);
}
95% {
clip-path: inset(48% 0 49% 0);
}
100% {
clip-path: inset(23% 0 64% 0);
}
}
.glitch::after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
overflow: hidden;
animation: noise-anim 2s infinite linear alternate-reverse;
}
#keyframes noise-anim-2 {
0% {
clip-path: inset(19% 0 72% 0);
}
5% {
clip-path: inset(6% 0 35% 0);
}
10% {
clip-path: inset(32% 0 35% 0);
}
15% {
clip-path: inset(97% 0 3% 0);
}
20% {
clip-path: inset(19% 0 57% 0);
}
25% {
clip-path: inset(85% 0 16% 0);
}
30% {
clip-path: inset(46% 0 46% 0);
}
35% {
clip-path: inset(83% 0 15% 0);
}
40% {
clip-path: inset(66% 0 18% 0);
}
45% {
clip-path: inset(90% 0 8% 0);
}
50% {
clip-path: inset(58% 0 34% 0);
}
55% {
clip-path: inset(38% 0 61% 0);
}
60% {
clip-path: inset(93% 0 6% 0);
}
65% {
clip-path: inset(4% 0 83% 0);
}
70% {
clip-path: inset(57% 0 38% 0);
}
75% {
clip-path: inset(97% 0 4% 0);
}
80% {
clip-path: inset(9% 0 57% 0);
}
85% {
clip-path: inset(7% 0 82% 0);
}
90% {
clip-path: inset(14% 0 54% 0);
}
95% {
clip-path: inset(94% 0 6% 0);
}
100% {
clip-path: inset(9% 0 49% 0);
}
}
.glitch::before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: palevioletred;
overflow: hidden;
animation: noise-anim-2 15s infinite linear alternate-reverse;
}
<div id="freedom-wrapper">
<div class="glitch" data-text="freedom">freedom</div>
<div id="freedom-links-wrapper">
<div class="freedom-links">
[
discord
/
steam
/
youtube
/
github
]
</div>
<div class="freedom-links">
[ <a class="toggle">ᴄʟɪᴄᴋ ᴍᴇ</a> ]
</div>
</div>
</div>
target="blank" is also invalid and should be target="_blank". As another note, you can refer to using :after pseudo elements on <a> elements to add a slash when the element is not the last in its child (:not(:last-child):after).
As a final note, refer to not using plain-text "fonts" and use actual fonts instead. Talking about the click me text. You should also not trust your predefined pixel offsets for the freedom margin.

Answer 2

id is unique.
Don’t use id to control the style, use class instead, id is generally used to process data.
<p class="center">
[
title 1
title 2
]
</p>
.center { text-align: center; }