CSS Same property declaration is not working

Question

I have this HTML layout:

<div class="container">
    <header>
        <h1>AmarCourse</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="post">
            <article>
                <h2>My First Article</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
            </article>
        </section>
        <aside>
            <h2>About Me</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
        </aside>
    </main>
    <footer>
        <nav>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Terms</a></li>
            </ul>
        </nav>
        <address>Dhanmondi 15 no, Dhanmondi, Dhaka-1209.</address>
        <p>All rights reserverd</p>
    </footer>
</div>

Now, I am using the following CSS for the footer and header:

header nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
}

footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
}

You can see that both header and footer hash the same css property that's why I am writing this code:

header,
footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
}

But It's showing me:

Should be show

@SwarajGandhi Please don’t encourage external resources. Stack Exchange sites have a Stack Snippet button for this purpose. See [How to create Stack Snippets](https://meta.stackoverflow.com/q/358992/4642212). — Sebastian Simon, Dec 27 '20 at 06:16
They are not the same. The header has `justify-content: space-around;` but the footer has it as `justify-content: center`. — Vivi, Dec 27 '20 at 10:35

score 2 · Accepted Answer · answered Dec 27 '20 at 06:09

2

If my understanding is correct, you are selecting only the header element and not the nav and the li inside it.

Please try the below:

header nav ul,
footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
}

Hope this works

answered Dec 27 '20 at 06:09

Arjun Kanungo

121
6

Thanks for your reply. Your code will work only for the footer but I want the header area too. – Shibbir Dec 27 '20 at 06:10
It will work for both header and footer, please give it a try and let me know. I have made an update, I could have missed it while pasting – Arjun Kanungo Dec 27 '20 at 06:11
Oh, Yes, why we need to write like this? – Shibbir Dec 27 '20 at 06:13
If it is pure CSS, you will need to specify the actual element, in your case, you only selected the header and not the items inside it. – Arjun Kanungo Dec 27 '20 at 06:14

score 0 · Answer 2 · answered Dec 27 '20 at 06:15

It works perfectly for me, with one change:

In the original CSS, header and footer nav ul have different justify-content attributes. Make sure you are using the correct selectors, as Arjun said, but you will need to leave the justify-content: center; for header.

It's probably best you leave it as it was, because that will work fine.

score 0 · Answer 3 · answered Dec 27 '20 at 06:15

0

Seems like desplay flex for header is worth. Because you wants Logo be up to the nav so just add to header flex-direction:column; justify-content:center; align-items is worth - delete this line.

answered Dec 27 '20 at 06:15

Morani

146
10

score 0 · Answer 4 · answered Dec 27 '20 at 06:56

header,
footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
}

Here you select only the header. You should be able to use this code for it to work.

header nav ul, 
footer nav ul 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
}

CSS Same property declaration is not working

4 Answers4