Unable to align a welcome text and unable to create flexbox after a pseudo element

Can anyone explain and help me fix my dilemma to my final project. I have two problems.

  1. After I put my navigation fixed, my welcome text seems unable to move no matter what commands I put just to center it and it seems the part moved hidden to the navigation bar. How do I fix this one?

  2. I created a pseudo-element for the “work” section as I can’t find to control the underline and instead created a pseudo element. However, I have trouble to create a flexbox items to put those projects i’ve done. How can i create a flexbox after the pseudo element that says “Here are some of my projects”?

Here’s my codepen link: https://codepen.io/Mar1414/pen/xxZPexw?editors=1100

I would appreciate your help very much! Thanks in advance.

hey i just can solved at 1 welcome text, u can write margin-top and margin-left inside the h1 element for example :

<h1 style="margin-top: 200px; margin-left: 350px;">Hi, my name is Marleo</h1>

CSS :

#welcome-section {
       display: flex;
       text-align: center;
       justify-content: center;
       align-items: center;
}

Just add :
justify-content: center;
align-items: center;
btw use flexbox to do that :wave:

I already used this one. Also, when I try to add flexbox is not executing that it might be due to the pseudo element. The text overlaps and the flexbox is not creating.

This is nice and alternative approach. However, it is manual and not automatically centering things. Hopefully, there’s an answer to this to use CSS code. Thanks for your reply @aldhaneka.

hehe bc i’m beginner and i haven’t done learned css yet

@aldhaneka. How many days are you now learning here in Freecodecamp? I’m on my 32nd days doing projects and pretty seem slow probably compared to others. Because I don’t want to move forward without understanding a lot of things.

i’m on my 4th days :upside_down_face: .

I see. You’re good. Keep going. :slight_smile: :innocent:

  1. The CSS posted for the #welcome-section works just fine for centering the text, but I don’t see it in your CSS though.

  2. The second question I don’t really understand.

Also, if you want to use a pseudo-element for the border, then add it to a text element. Have the text inside the text element and not the content property of the pseudo-element.

<h2 class="project-header">Here are some of my projects</h2>
.project-header {
  margin: 0;
  padding-top: 20px;
}

.project-header::after {
  content: ""; 
  display: block; 
  margin: 0 auto;
  width: 50%;
  font-size: 25px;
  border-bottom: 3px solid black;
  padding-top: 10px;
}

@lasjorg thanks. I got this figured out already and now seeking feedback for one last problem I couldn’t pass.