我試圖用flexbox和SCSS為我的學校項目網站做一個頁腳，但它不像預期的那樣工作。

我想知道的是。頁腳-主頁面在中間。在。我想把h2放在左邊，把ul放在右邊。我試過文本對齊:居中；，align-items:居中；& ampjustify-content:居中；但是這些都不管用。

<footer>
        <section class="footer-main">
            <p>name name</p>
          
            <a href="mailto:123@mail.com">
               123@mail.com
            </a>
    
            <p>place</p>

            <p>province, country</p>
        </section>
        
        <hr>

        <section class="footer-end">
            <h2>copyright 2023</h2>
    
            <ul>
                <li>
                    <a href="link">
                        link
                    </a>
                </li>
                <li>
                    <a href="link">
                        link
                    </a>
                </li>
            </ul>
        </section>
    </footer>

footer {
    padding: 10px;
    line-height: 80%;
    .footer-main {
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .footer-end {
        display: flex;
    }
    ul {
        display: flex;
        width: 10vh;
        text-decoration: none;
        list-style: none;

        a {
            list-style: none;
        }
    }
}

# # #你需要稍微修改一下你的html，并在適當的地方添加flex

footer {
    padding: 10px;
    line-height: 80%;
}
.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

.footer-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
ul {
    display: flex;    
    width: 10vh;
    text-decoration: none;
    list-style: none;
   
    }
    
    li{
    margin-right:5px;}

a {
    list-style: none;
}

<footer>
        
        
        <hr>

        <section class="footer-end">
            <h2>copyright 2023</h2>
            
            <div class="footer-main">
            <p>name name</p>
          
            <a href="mailto:123@mail.com">
               123@mail.com
            </a>
    
            <p>place</p>

            <p>province, country</p>
        </div>
            
    
            <ul>
                <li>
                    <a href="link">
                        link
                    </a>
                </li>
                <li>
                    <a href="link">
                        link
                    </a>
                </li>
            </ul>
        </section>
        <hr>
    </footer>