HTML/CSS右侧大盒子位置错位及内部内容对齐问题求助

现有代码核心问题 #

1. 全局样式错误：通配符*中padding: 0px auto属于无效语法，padding不支持auto值，会导致元素间距异常。
2. 两列布局缺少父容器控制：左侧col1和右侧box_4为平级元素，没有套父容器开启flex布局，自然无法实现左右并排对齐，且box_4设置的margin-left: 600px、margin-bottom: 1800px属于错误冗余属性，直接将元素挤到了页面下方。
3. 无效属性滥用：position: left、position: right、给普通块元素设置object-position均为无效写法，无法实现预期的对齐效果。
4. HTML语义错误：ul标签只能嵌套li子标签，你当前层层嵌套ul的写法既不符合规范，也会触发浏览器默认的列表缩进样式导致排版错乱。
5. 右侧盒子内部无布局控制：两队信息容器没有设置横向排列规则，自然会上下堆叠。

调整方案 #

第一步：修改HTML结构

给左右两列套flex父容器，同时修正右侧盒子内部的语义标签：

<!-- 新增主容器包裹左右列 -->
<div class="main_container">
  <div class="col1">
    <!-- 原有左侧三个盒子代码保持不变 -->
  </div>
  <div class="box_4">
    <h3 class="box4_headline"><img src="assets\live symbol.jpg" class="live_symbol">&nbsp &nbsp &nbsp Ninjas leading Pirates</h3>
    <!-- 新增游戏内容容器包裹两队信息 -->
    <div class="game_content">
      <div class="b4_list1">
        <img src="assets\sjc-ninjas.png" class="ninja_symbol">
        <p class="SJ">San Jose</p>
        <p class="ninja1">Ninjas</p>
        <p class="tenw">(10 W - 3L)</p>
        <button class="ninjascore">
          <span class="ninjascore1">319</span>
        </button>
      </div>
      <p class="vs">VS</p>
      <div class="b4_list2">
        <img src="assets\ns-pirates.png" class="pirate_symbol">
        <p class="NS">Nova Scotia</p>
        <p class="pirate1">Pirates</p>
        <p class="twelvew">(12 W - 2 L)</p>
        <button class="piratecore" onclick="">
          <span class="piratescore1">159</span>
        </button>
      </div>
    </div>
    <p class="gameinfo">A conservative match between two top-performing sides in the Central League Division with a Number 1 seed at stake...</p>
    <p class="readmore">Get more live updates...</p>
  </div>
</div>

第二步：修改CSS样式

/* 修正全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免padding撑大盒子尺寸 */
  font-family: sans-serif;
}

/* 新增主容器flex布局，实现左右列顶部对齐 */
.main_container {
  display: flex;
  align-items: flex-start;
  gap: 30px; /* 两列间距可自行调整 */
  padding: 15px 35px;
}

/* 修正左侧列样式 */
.col1 {
  display: block;
  padding-top: 10px;
  margin-top: 5px;
}

/* 修正右侧大盒子样式，删除错误的margin属性 */
.box_4 {
  background-color: white;
  border-radius: 5px;
  min-height: 700px; /* 用min-height比固定height更灵活 */
  width: 880px;
  padding: 10px;
}

/* 新增游戏内容布局，实现两队横向并排 */
.game_content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 30px 0;
}

/* 给两队信息设置居中对齐 */
.b4_list1, .b4_list2 {
  text-align: center;
}

/* 修正原有小错误：user_icon的padding属性下划线改横线 */
.user_icon {
  height: 34px;
  width: 29px;
  padding-top: 5px;
  padding-left: 5px;
}

/* 修正原有小错误：rotateY的单位是deg不是px */
.DSNN {
  color: whitesmoke;
  font-style: italic;
  background-color: red;
  font-weight: bolder;
  transform: rotateY(23deg);
}

内容的提问来源于stack exchange，提问作者AK-JUN