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

#1

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.

#2

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>
#3

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:

#4

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.

#5

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.

#6

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

#7

@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.

#8

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

#9

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

#10

  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;
}
#11

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