CodePen

HTML

            
              <section class="block recommended cf">

<h2>Title</h2>
<hr>

<div class="rec-el-wrap cf">

<div class="element">
<img src="img/210x140.jpg" alt="210x140" width="210" height="140">
<span class="rec-title">Title</span>
<p>Lorem Ipsum</p>
</div> <!-- ELEMENT END -->

<div class="element">
<img src="img/210x140.jpg" alt="210x140" width="210" height="140">
<span class="rec-title">Title</span>
<p>Lorem Ipsum</p>
</div> <!-- ELEMENT END -->

<div class="element">
<img src="img/210x140.jpg" alt="210x140" width="210" height="140">
<span class="rec-title">Title</span>
<p>Lorem Ipsum</p>
</div> <!-- ELEMENT END -->

</div> <!-- rec-el-wrap END -->

</section>  <!-- block recommended END -->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .recommended {
  width: 740px;
  max-height: 320px;
	float: left;
	margin-right: 20px;
	.rec-el-wrap {
		position: relative;
		max-height: 240px;
		max-width: 710px;
		margin-left: 30px;
		padding-top: 10px;
		padding-left: 20px;
		text-align: center;
		font-size: 0;
		border-top: 10px solid #dfdbcf;
		border-bottom: 10px solid #dfdbcf;
		border-left: 5px solid #dfdbcf;
		border-right: 5px solid #dfdbcf;
		border-radius:10px;
		.left-arrow{
			position: absolute;
			width: 62px;
			height: 74px;
			top: 50px;
			left: -5px;
			background: green;
			background-repeat: no-repeat;
		}
    .right-arrow {
      position: absolute;
			width: 62px;
			height: 74px;
      right: -5px;
      top: 50px;
      background: red;
    }
		.element{
			float: left;
			margin-left: 15px;
			max-width: 210px;
			max-height: 210px;
			&:first-child{
				margin-left: 0px;
			}
			&:last-child{
				margin-right: 0px;
			}
			.rec-title {
				font-size: 14px;
				font-weight: bold;
				color: #790000;
			}
			p {
				font-size: 11px;
			}
		}
	}
}
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................