Columns are not consistent with same CSS - html

Question

I have the exact coding in my html for each of these columns and I'm not sure what I've changed in my css to make the columns all look so different. The left column is the style and positioning that I want. I don't understand how all the more buttons are different and how the more button on the right is completely separate from the grey box even though they are in the same div...I'm new at this so any help would be greatly appreciated!
I will add a jsfiddle to show all of the code and I'll add a portion of the code here: https://jsfiddle.net/40bnatg3/
Also here is a picture of the problem:
<div class="column-center">
<div id= "middle-box">
<h2> Objectives</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p >Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities.
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.
<br>
<a id="button2" href="msum.css" class="more">More</a>
</p>
</div>
</div>

Answer 1

Remove position:relative from .column_center style class definition:
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
Also, you will have to remove a br tag that is between left colum html and center column html in line 49.
Then you will have to change the button1 id definition to:
#button1{
color:black;
top: 35px;
width: 30%;
padding: 1%;
position: relative;
display: inline-block;
font-weight:bold;
}
Edit:
I think it is cleaner for your code to remove all the css styles for #button1, #button2 and #button3 and just leave the style for class .more like this:
.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%;
}