Trying to get my links to all line up - html

Question

I am trying to get my "more" links to all line up straight. I was wondering if I should make a separate div for them? Otherwise I don't really know what to do. I'm new at this so do not judge too harshly. Thank You! I added a jsfiddle but I know that I didn't properly do it...I hope you can just look at the code though. I'll add a picture of what I'm having problems with: https://jsfiddle.net/uxnLsxxk/
<div class="box1">
<div class="column-left">
<h2> Content</h2>

Answer 1

You can use good'old tables too
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<h2> Content</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Objectives</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Project</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

Answer 2

Check the output in Jsbin
#media only screen and (min-width: 961px) {
/*-----CONTENT -----*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
font-family: 'Arapey', serif;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
text: black;
background-color:#670809;
height:70px;
text-align: center;
letter-spacing:1px;
line-height: 55px;
}
header, h1, h2{
font-family: 'Yatra One', cursive;
}
nav ul li a {
display:inline-block;
text-align: center;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;*/
color: white;
}
nav ul li a:hover {
/*background-color:none;*/
color: white;
}
nav ul li a:visited {
color:white;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
margin: 5px;
}
h2{
text-align: center;
color:#670809;
font-size: 30px;
margin: 5px;
}
p{
text-align: center;
}
.column-left{
float: left;
width: 30%;
padding: 1%;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
}
section{
text-align: center;
width: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
height: 50px;
background-color:#670809;
font-family: 'Yatra One', cursive;
/* text */
padding-left: 10px;
padding-top: 10px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:hover, a:active, a:visited { color: white; }
.box1{
border-width:thick;
border-style:solid;
border-color:#287EC7;
}
#button1{
color:black;
float: left;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button2{
color:black;
display: inline-block;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button3{
float: right;
width: 30%;
padding: 1%;
color:black;
font-weight:bold;
}
.more{
position:relative;
left:-120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
Home
About
Contact
MSUM
</header>
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
</figure>
<object type="image/svg+xml" data="newsvg.svg" ></object>
<div class="video-txt" ></div>
<section>
<section>
<h1> GCOM 366 Overview</h1>
<div class="box1">
<div class="column-left">
<h2> Content</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
<br>
<!-- <a id="button1" href="about.css">More</a>-->
</p>
</div>
<br>
<div class="column-center">
<h2>Objectives</h2>
<img class="img" src="techpic1.jpg" alt="html code" 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="contact.css">More</a>-->
</p>
</div>
<div class="column-right">
<h2> Project</h2>
<img class="img" src="techpic2.jpg" alt="keyboard" width="200" height="200" />
<p>The course centers around weekly projects that will feed into the development of a
final project. A website must a have a clear purpose and established brand students will develop their plan for this, and execute it with skills learned in the class.
The website must be well organized, competitively designed, and skillfully coded
<br>
<a id="button3" href="msum.css" class="more">More</a>
</p>
</div>
</section>
</div>
<footer>
</footer>
</body></html>
</body>
</html>

Answer 3

This code should do it.
HTML
<div class="text-container">
<p class="overview-text">
... your text ...
</p>
<div class="more-link">
More
</div>
</div>
CSS
.overview-text, .more-link {
text-align: center;
}
Place the HTML after the img tags.

Answer 4

Set min-height for overview-text class. And i hope it will fix your issue. for example
CSS:
.overview-text{
min-height: 200px
}