HTML列间距不均及新增内容布局异常问题求助

刚入门HTML，有Python开发经验，上手还算顺畅。目前碰到两个布局问题：

• 用inline-block实现的column列间距不均匀
• 在该布局后添加新内容时，列会出现额外换行

怀疑是浮动、内边距这类属性影响，但没法确定具体原因，相关代码如下：

<!DOCTYPE.html>
<html>
        <style>
            html {
                cursor: url("https://cdn.discordapp.com/attachments/732378808132436010/1005850390249607209/Untitled_40_40_px_2.png"), auto;
            }
        </style>
<body style="background-color:black;">
<p style="text-align:center;">
<img src="https://cdn.discordapp.com/attachments/732623682576580719/1005689024817668116/Screen_Shot_2022-08-07_at_12.06.59_AM.png" alt="Music Feedback">
</p>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
.column {
  width: 30%;
  padding: 10px;
  height: 150px;
  display: inline-block;
}

.row {
  text-align: center;
}
</style>

  <div class="row">
    <div class="column">
    <style>
        .test{
            cursor:url("https://cdn.discordapp.com/attachments/732378808132436010/1005851128421953596/Untitled_40_40_px_3.png"), auto
        }
    </style>

      <h2><a href="www.google.com" style="color:rgb(227, 131, 227)" class="test">Who We Are</a></h2>
    </div>
    <div class="column">
      <h2><a href="www.google.com" style="color:rgb(227, 131, 227)" class="test">News & Events</a></h2>
    </div>
    <div class="column">
      <h2><a href="www.google.com" style="color:rgb(227, 131, 227)" class="test">Contact</a></h2>
    </div>
</div>

</body>
</html>

恳请各位帮忙排查问题，谢谢！

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