<main role="main" class="container">
  <div id="main_right">
    <div id="shop_wrap">
        <div class="shop_content">
          <ul class="commerce_lists">
            <li><a href="#">G마켓</a></li>
            <li><a href="#">옥션</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">G마켓</a></li>
            <li><a href="#">옥션</a></li>
            <li><a href="#">11번가</a></li><br>
            <li><a href="#">G마켓</a></li>
            <li><a href="#">옥션</a></li>
            <li><a href="#">11번가</a></li>
            <li><a href="#">G마켓</a></li>
            <li><a href="#">옥션</a></li>
            <li><a href="#">11번가</a></li>
          </ul>

          <ul class="product_lists clearfix">
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://via.placeholder.com/107x146">
                <div class="product_info">
                  <h3>퀄리티가 중요한</h3>
                  <span>당신을 위한 룩</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

img {
  vertical-align: middle;
}

.clearfix {
  clear: both;
}

main #main_right {
  width: 350px;
  height: 300px;
  background-color: lightpink;
  margin-left: 15px;
}

#main_right #shop_wrap .shop_content .commerce_lists {
  padding: 0 20px;
  margin: 15px 0;
}

#main_right #shop_wrap .shop_content .commerce_lists li {
  float: left;
  font-size: 12px;
  margin: 0 10px 5px;
}

#main_right #shop_wrap .shop_content .product_lists {
  position: relative;
  top: 5px;
  padding-left: 8px;
}

#main_right #shop_wrap .shop_content .product_lists li {
  display: inline-block;

  width: 108px;
  margin: 0 auto;
}

#main_right #shop_wrap .shop_content .product_lists .product_info {
  font-size: 12px;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.