Display:flex is not working! why is not it working? i can not understand! can anyone please solve this prblem? here is my codepan link:-

What do you mean? The code you have right now is doing exactly what it should be doing. I think you might need to go back and read up on flex box some more. You are going to need to try and explain what you are trying to do. Just giving code without any explanation of your end goal is not going to get a lot of people to help. Align items aligns the flex container vertically meaning up and down. Here is your page with the align-items in place. I cant put it in play mode because you have not verified your emai in code pen yet. This is aligned vertically which is what your code is telling it to do

If you get rid of the flex box you get this. See? No longer centered vertically.

Welcome to our community!

Within the footer (#contact) you have only one div element as a child element. Obviously, you can not see flexbox in action as you wish, I suppose:

You can get this look by using the following selectors in your code:

.SEOGram  {
        display: flex;
        justify-content: space-between;
        background-color: black;
        color: #F6F5FC;
        align-items: center;
        height: 350px;
        width: 100%;
        position: relative;

.SEOGram h1 {
  position: absolute;
  top: 30%;
  left: 0;

The #contact selector is deleted in this case.

1 Like

Thanks! it worked

Thanks! it worked

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.