Html 列与相同的CSS不一致

我在我的html中为每一列编写了精确的代码，我不确定我在css中做了哪些更改，使这些列看起来如此不同。左栏是我想要的样式和位置。我不明白为什么更多的按钮是不同的，为什么右边的更多按钮是完全独立于灰色框的，即使它们在同一个分区中…我是新手，所以任何帮助都将不胜感激

我将添加一个JSFIDLE来显示所有代码，并在此处添加部分代码：

下面是问题的图片：

目标
成功完成课程后，学生将：
1） 具备下列计算机软件应用或软件的能力
实践；
A.超文本标记语言（HTML5）
B级联样式表（CSS3）
CPhotoshop
DIFirefox、Chrome、Safari等
EFTP客户端（Fetch、Filezilla等）
2.设计各种复杂的网页。
3.了解web发布中使用的术语。
4.讨论图形应用程序的重要性及其与图形的关系
-
集成电路通信产业。

从中删除位置：相对。柱\u中心样式类定义：

.column-center{
    display: inline-block;
    width: 30%;
    padding: 1%;
    bottom: 18px;
}

此外，您还必须删除第49行中位于左栏html和中栏html之间的br标记

然后您必须将按钮1id定义更改为：

#button1{
    color:black;
    top: 35px;
    width: 30%;
    padding: 1%;
    position: relative;
    display: inline-block;
    font-weight:bold;
}

编辑：

我认为删除#button1、#button2和#button3的所有css样式，并将样式留给类，对您的代码来说更干净。更像这样：

.more {
  position: relative;
  display:inline-block;
  color:black;
  font-weight: bold;
  top: 20px;
  right: 31px;
  background-color: white;
  border-bottom-left-radius: 10px;
  padding: 5px;
  margin: 10px;
  width: 30%;
}

---

请分享这三列完整的HTML代码和相关的CSS定义。很抱歉，我完全忘了链接JsFiddle@mertyildrianThank谢谢你的帮助！我已经更新了JSFIDLE，但仍然存在问题@你知道我会怎样把第三栏的灰色方框降下来以匹配其他的吗@DezI更新了我的答案，对#button1 id选择器进行了修改，以实现“更多”链接标签的相同位置。是的，我得到了它，并且它起了作用，但我仍然很难让左一个匹配这两个。就像在白色的盒子里一样。我将更新我的图片和JSFIDLE，以便您可以看到@非常感谢你的帮助！有了你的评论，我终于明白了！再次感谢@迪兹

.more {
  position: relative;
  display:inline-block;
  color:black;
  font-weight: bold;
  top: 20px;
  right: 31px;
  background-color: white;
  border-bottom-left-radius: 10px;
  padding: 5px;
  margin: 10px;
  width: 30%;
}