Responsive horizontal JS scroll

Question

I've created a horizontal scroll, but I need some help with my javascript. What I want is, when I click on the right button, it should align perfectly with the second box, and then the third one and so on. My javascript is set to scroll 100px. But I want it to align perfectly with the other boxes.

IMPORTANT! The horizontal scroll will be added to a responsive website. So I cant use px here :) Hope somebody can help :) Thanks

$(document).ready(function(){
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+100});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+100});
    });        
});

.offer-pg-cont{
    width: 100%;
    overflow-x: auto;
    margin: 0px;
}
span.arrow-left,span.arrow-right{
    display: block;
    position: absolute;
    background-color: #555;
    top: 40px;
    color:white;
    z-index: 2;
    cursor: pointer;
}
span.arrow-left{
    left: 0px;
}
span.arrow-right{
    right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
    background-color: #333;
}
.content{
    width: 1500px;
}
.item-wrapper.offer-con{
    background-color: #333 !important;
}
.offer-con .left-item h4 {
    color: #fff;
    font-weight: normal;
    margin: 0px;
}
.offer-con .right-item{
    float: right;
    padding: 10px;
}
.offer-con .right-item h5{
    color: #cb9944;
    margin: 0px;
    font-size: 14px;
}
.content > .portfolio-item{
    width: 10%;
    background-color:blue;
    margin-right:50px;
    float:left;
  height:100px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
    <div class='content'>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
    </div>
</div>

Answer 1

You must be check the width and margin of your element and add to your scroll. But warning, your content width inside the box must be: the number of boxe X the (width + margin) of box:

Example: 6 x (200+50)

because otherwise your scroll will not full: Please try below

$(document).ready(function(){
  var margin = parseInt($(".portfolio-item").css("margin-right").replace("px",""));
  var width = parseInt($(".portfolio-item").width()) ;
  var widthitem = width + margin; 
  console.log(widthitem)
    $(".arrow-left").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "-="+widthitem});
    });
    $(".arrow-right").click(function(){
        $(".offer-pg-cont").animate({scrollLeft: "+="+widthitem});
    });        
});

.offer-pg-cont{
    width: 100%;
    overflow-x: auto;
    margin: 0px;
}
span.arrow-left,span.arrow-right{
    display: block;
    position: absolute;
    background-color: #555;
    top: 40px;
    color:white;
    z-index: 2;
    cursor: pointer;
}
span.arrow-left{
    left: 0px;
}
span.arrow-right{
    right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
    background-color: #333;
}
.content{
    width: 1500px;
}
.item-wrapper.offer-con{
    background-color: #333 !important;
}
.offer-con .left-item h4 {
    color: #fff;
    font-weight: normal;
    margin: 0px;
}
.offer-con .right-item{
    float: right;
    padding: 10px;
}
.offer-con .right-item h5{
    color: #cb9944;
    margin: 0px;
    font-size: 14px;
}
.content > .portfolio-item{
    width: 10%;
    background-color:blue;
    margin-right:50px;
    float:left;
  height:100px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
    <div class='content'>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
        <div class="col-md-3 portfolio-item"></div>
    </div>
</div>