如何在不移动Header其他元素的情况下将右侧图片左移？

要实现仅右侧图片左移且不影响其他元素位置，你可以使用transform: translateX() 或者相对定位，这两种方式不会改变元素的布局占位，因此不会干扰Header内其他元素的位置：

方案1：使用transform（推荐） #

修改.right_header img的CSS：

.right_header img {
    width: 30px;
    cursor: pointer;
    transform: translateX(-5px); /* 向左移动5px，可根据需求调整数值 */
}

方案2：使用相对定位 #

修改.right_header的CSS：

.right_header {
    position: relative;
    right: 5px; /* 向左移动5px，可根据需求调整数值 */
}

为什么之前的方法会影响中间导航？ #

你的Header使用了display: flex; justify-content: space-between;，这个属性会根据容器内元素的总宽度分配剩余空间。当你给右侧元素设置margin-right时，会增加该元素的占位宽度，导致flex容器重新计算并分配剩余空间，最终让中间的导航链接位置偏移。而transform和相对定位仅改变元素的视觉位置，不会影响其在布局中的占位，因此不会干扰其他元素。

修改后的完整CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid;
}
.left_header img {
    width: 90px;
}
.main_links {
    width: 400px;
}
.main_links ul {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
}
.main_links a {
    text-decoration: none;
    color: pink;
}
.main_links a:hover {
    color: black;
}
.right_header img {
    width: 30px;
    cursor: pointer;
    transform: translateX(-5px); /* 添加左移样式 */
}

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