如何将HTML页面白色盒子内的社交媒体图标设置为右对齐

你使用justify-content-end未生效的核心原因是没有给对应的父容器设置Flex布局属性，justify-content系列属性仅对Flex/Grid容器生效，普通块级元素添加该属性不会有任何效果。

根据你的布局需求，可以选择以下两种方案实现，全部采用Bootstrap内置类即可完成，无需额外编写自定义CSS：

方案1：社交媒体图标单独一行右对齐 #

直接给.social-media容器添加Flex相关属性即可：

<div class="social-media d-flex justify-content-end gap-2">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-instagram"></i>
    <i class="fab fa-youtube"></i>
    <i class="fab fa-snapchat"></i>
</div>

• d-flex将容器设为Flex布局，才能让后续的对齐属性生效
• justify-content-end将子元素对齐到容器右侧
• gap-2用于设置图标之间的统一间距，可根据视觉需求调整数值为1/3/4等

方案2：搜索图标/文字居左，社交媒体图标居右，二者同处一行 #

如果需要让搜索区域和社交图标在同一行左右分布，需要先把顶部相关元素包裹在同一个Flex父容器中：

<div class="center mx-auto box">
    <!-- 新增Flex容器包裹顶部元素 -->
    <div class="d-flex justify-content-between align-items-center w-100 mt-4">
        <div class="d-flex align-items-center gap-2">
            <i class="fas fa-search"></i>
            <span class="fs-3 search">Search</span>
        </div>
        <div class="social-media d-flex gap-2">
            <i class="fab fa-facebook"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-youtube"></i>
            <i class="fab fa-snapchat"></i>
        </div>
    </div>
    <!-- 下方原有内容保持不变 -->
    <div class="center">
        <h1 class="text-center title">
            DATA ANALYSIS <br />
            & STATISTICS
        </h1>
        <p class="text-center mt-4 title-text">
            Lorem ipsum dolor sit amet consectetur adipisicing <br />
            elit. Reiciendis iste, aperiam possimus temporibus
            <br />
            pariatur nulla quas et atque voluptatibus!
        </p>
        <div class="text-center">
            <button
                type="button"
                class="btn text-white mt-4 px-3 py-1"
                style="background-color: rgb(38, 25, 100)"
            >
                Learn More
            </button>
        </div>
    </div>
</div>

• justify-content-between实现两端对齐，让搜索区域和社交图标分别靠在左右两侧
• align-items-center保证所有元素在垂直方向居中对齐
• w-100保证Flex容器占满父盒子宽度，才有足够空间实现两端对齐

内容的提问来源于stack exchange，提问作者Trayansh Agarwal