Code block columns are stacking

Site URL: https://www.core4.com.au/home-1

Hi there,

Squarespace 7.1 user.

I am trying to make my code block with the 3 results column view for desktop but they are stacking on top of one another. Does anyone know why my code keeps stacking rather than sitting next to each other? Also why the icons arent appearing.

Screenshots attached and code below. 

HTML

<div class="content-103">
	<div class="container">
		<div class="row">
			<h2 class="sercies-title">Our Awesome Services</h2>
			<div class="col-md-4 col-sm-4">
				<div class="service-post">
					<div class="service-content">
						<div class="service-icon">
								<i class="fa fa-share-alt"></i>
						</div> <!-- service-icon -->
						<h3 class="service-title">Advertising</h3>
						<p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p>
					</div> <!-- service-content -->
					<div class="service-hover"></div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="service-post">
					<div class="service-content">
						<div class="service-icon">
								<i class="fa fa-pencil"></i>
						</div> <!-- .s-icon -->
						<h3 class="service-title">Branding Design</h3>
						<p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p>
					</div> <!-- service-content -->
					<div class="service-hover"></div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="service-post">
					<div class="service-content">
						<div class="service-icon">
								<i class="fa fa-lightbulb-o"></i>
						</div> <!-- .s-icon -->
						<h3 class="service-title">Creative Marketing</h3>
						<p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p>
					</div> <!-- service-content -->
					<div class="service-hover"></div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.content-103{
	background: #f3f3f3;
	padding-bottom:50px;
}

.content-103 .sercies-title{
	text-align:center;
	padding: 50px 0;
}

.service-post {
  background: #fff;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 12;
  margin-bottom: 30px;
  -moz-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08);
}
.content-103 .service-content {
  position: relative;
  z-index: 13;
}
.content-103 .service-icon {
  margin: 10px 0 20px 0;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  border: 2px solid #eb7a5c;
  margin-left: auto;
  margin-right: auto;
  line-height: 50px;
  -moz-transition: color, 250ms;
  -o-transition: color, 250ms;
  -webkit-transition: color, 250ms;
  transition: color, 250ms;
}
.content-103 .service-post:hover .service-icon {
  border-color: #fff;
}
.content-103 .service-icon i {
  font-size: 18px;
  color: #eb7a5c;
}
.content-103 .service-post:hover .service-icon i {
  color: #fff;
}
.content-103 .service-title {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 15px;
  -moz-transition: color, 250ms;
  -o-transition: color, 250ms;
  -webkit-transition: color, 250ms;
  transition: color, 250ms;
}
.content-103 .service-post:hover .service-title {
  color: #fff;
}
.content-103 .service-description {
  -moz-transition: color, 250ms;
  -o-transition: color, 250ms;
  -webkit-transition: color, 250ms;
  transition: color, 250ms;
}
.content-103 .service-post:hover .service-description {
  color: #fff;
}


.content-103 .service-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 0px;
  background: #eb7a5c;
  -moz-transition: width, 250ms;
  -o-transition: width, 250ms;
  -webkit-transition: width, 250ms;
  transition: width, 250ms;
}
/*hover-background-color effect*/
.content-103 .service-post:hover .service-hover {
  height: 100%;
}

Thank you