This should solve pretty much most of your issues:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>VPCFO Mission</title>
<link href="https://fonts.iu.edu/style.css?family=BentonSans:regular,bold|BentonSansCond:regular|GeorgiaPro:regular" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="lightbox.js"></script>
<style>
body {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 17px;
background: #CCCCCB;
}
* {
box-sizing: border-box;
}
.page_wrapper {
padding: 40px;
}
@media screen and (max-width: 480px) {
.page_wrapper {
padding: 10px;
}
}
header {
text-align: center;
}
header h1 {
margin: 0;
padding: 20px 0 30px 0;
font-size: 45px;
font-weight: 400;
}
.horizontal_line {
position: relative;
}
.line {
position: absolute;
top: 50%;
background-color: #770e29;
height: 2px;
width: 100%;
z-index: -10;
}
/* OUR MISSION/VISION */
.our_mission_vision {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
@media screen and (max-width: 920px) {
.our_mission_vision {
width: 90%;
}
}
@media screen and (max-width: 768px) {
.our_mission_vision {
width: 100%;
}
}
.our_mission_wrapper, .our_vision_wrapper {
display: flex;
border: 2px solid #770e29;
background-color: #CCCCCB;
padding: 7px;
width: 47%;
}
@media screen and (max-width: 768px) {
.our_mission_wrapper, .our_vision_wrapper {
width: 100%;
margin: 0 0 30px 0;
}
}
.our_mission, .our_vision {
flex: 1;
border: 1px solid #770e29;
background-color: #fff;
padding: 20px;
}
.our_mission h2, .our_vision h2 {
margin: 0;
padding: 0 0 15px 0;
font-weight: 400;
letter-spacing: 1px;
text-align: center;
color: #a80532;
font-size: 32px;
text-transform: uppercase;
}
.our_mission p, .our_vision p {
margin: 0;
padding: 0;
}
/* OUR VALUES */
.our_values {
display: flex;
justify-content: center;
margin: 30px auto;
}
@media screen and (max-width: 768px) {
.our_values {
margin: 0 auto;
}
}
.our_values_wrapper {
border: 2px solid #770e29;
background-color: #CCCCCB;
padding: 7px;
width: 30%;
}
@media screen and (max-width: 920px) {
.our_values_wrapper {
width: 50%;
}
}
@media screen and (max-width: 768px) {
.our_values_wrapper {
width: 100%;
}
}
.values {
flex: 1;
border: 1px solid #770e29;
background-color: #fff;
padding: 20px;
}
.values h2 {
margin: 0;
padding: 0;
font-weight: 400;
letter-spacing: 1px;
text-align: center;
color: #a80532;
font-size: 28px;
text-transform: uppercase;
}
/* THUMBS */
.thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: 0;
}
@media screen and (max-width: 768px) {
.thumbs {
margin: 30px auto;
}
}
.thumbs img {
max-width: 100%;
height: auto;
}
.thumbs li {
margin: 0 1.5%;
padding: 0;
list-style: none;
width: 16%;
}
@media screen and (max-width: 768px) {
.thumbs li {
width: 22%;
}
}
@media screen and (max-width: 500px) {
.thumbs li {
margin: 0 3%;
width: 31%;
}
}
.thumbs li p {
text-align: center;
color: #770e29;
font-size: 18px;
}
/* FOOTER */
footer {
font-size: 33 pt;
width: 90%;
margin: 0 auto;
text-align: center;
}
footer a {
text-decoration: none;
color: black;
font-size: 15pt;
font-family: BentonSansComp Book;
}
</style>
</head>
<body>
<div class="page_wrapper">
<header>
<a href="https://www.iu.edu/"><img style="height:108.57px; width:92px; margin: 0 auto .5em auto;" src="https://treasurer.iu.edu/_assets/images/block-iu.png" width="246" height="287" alt=""/></a><h1>Office of the Vice President & Chief Financial Officer </h1>
</header>
<div class="horizontal_line">
<div class="line"></div>
<div class="our_mission_vision">
<div class="our_mission_wrapper">
<div class="our_mission">
<h2>Our Mission</h2>
<p>We serve Indiana University's mission by promoting the well-being of our employees and the financial health of our University.</p>
</div>
<!-- end our_mission -->
</div>
<!-- end our_mission_wrapper -->
<div class="our_vision_wrapper">
<div class="our_vision">
<h2>Our Vision</h2>
<p>We aspire to be trusted partners to all, interacting with respect, integrity, and accountability. We will be an engaged workforce who values collaboration, professional growth, and each other.</p>
</div>
<!-- end our_vision -->
</div>
<!-- end our_vision_wrapper -->
</div>
<!-- end our_mission_vision -->
</div>
<!-- end-horizontal_line -->
<div class="horizontal_line">
<div class="line"></div>
<div class="our_values">
<div class="our_values_wrapper">
<div class="values">
<h2>Our Values</h2>
</div>
<!-- end values -->
</div>
<!-- end our_values_wrapper -->
</div>
<!-- end our_values -->
</div>
<!-- end-horizontal_line -->
<ul class="thumbs">
<li style="background-color: #CCCCCB; border: none;"><img src="https://treasurer.iu.edu/_assets/images/collaboration3.png" />
<p class="caption">Collaboration</p>
</li>
<li style="background-color: #CCCCCB; border: none;"><img src="https://treasurer.iu.edu/_assets/images/integrity3.jpg" />
<p class="caption">Integrity</p>
</li>
<li style="background-color: #CCCCCB; border: none;"><img src="https://treasurer.iu.edu/_assets/images/trust3.png" />
<p class="caption">Trust</p>
</li>
<li style="background-color: #CCCCCB; border: none;"><img src="https://treasurer.iu.edu/_assets/images/respect3.png" />
<p class="caption">Respect</p>
</li>
<li style="background-color: #CCCCCB; border: none;"><img src="https://treasurer.iu.edu/_assets/images/growth3.png" />
<p class="caption">Growth</p>
</li>
</ul>
<footer>
<p style="text-align: center; font-size: 15pt; text-decoration: none"><a href="https://fms.iu.edu/">Financial Management Services</a> <span class="red">|</span> <a href="https://www.budu.iu.edu/">University Budget Office</a> <span class="red">|</span> <a href="http://hr.iu.edu">Human Resources</a> <span class="red">|</span> <a href="http://www.indiana.edu/~purchase/">Office of Procurement Services</a> <span class="red">|</span> <a href="https://treasurer.iu.edu/">Office of the Treasurer</a></p>
</footer>
</div>
<!-- end page_wrapper -->
</body>
</html>
AdChoices