i want to align picture to the extreme right of the slider(it should be responsive)

I want to align the picture to the extreme right of the slider, i did try margin-left but its not working in all sizes of the screen. i want to make it responsive as well so that the picture remains on extreme left in all sizes of the screen. please help.
Below is the code of the slider.

   


/********************************/
/*       Slides backgrounds     */
/********************************/
#first-slider .slide1 {
  
    background-color: blue; 
      background-size: cover;
    background-repeat: no-repeat;
}




/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
      
}
@media screen and (max-width: 640px){
      
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" target="_blank" rel="nofollow" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link target="_blank" rel="nofollow" href="https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,500" rel="stylesheet">

</head>

<body><div id="first-slider">
    <div id="carousel-example-generic" class="carousel slide carousel-fade">
       
        <div class="carousel-inner" role="listbox">
         
            <div class="item active slide1">
                <div class="row"><div class="container">
                    <div class="col-md-7 text-left">
                        

                     
                        <a style="background-color: #272a2e; font-weight: 500; font-size: 14px; border: black; " target="_blank" rel="nofollow" href="#" class="btn btn-info btn-lg da-link">
                  IP CAMERAS </a>
                     </div>
                    <div class="col-md-5 text-right">
                        <img style="" width="100%" height="100%" data-animation="animated zoomInLeft" src="http://grandstream.com.pk/img/cam.png">
                    </div>
                </div></div>
            </div>
            <!-- Item 3 -->
          
    
        </div>
        <!-- End Wrapper for slides-->
     
    </div>
</div></body>

</html>

margin-left will create a space to the left of your element, but unless the value is variable (like 95vw), then the position will not be responsive.

You should instead use either position or float to achieve the desired effect, depending on which side you want (you stated extreme right, then extreme left).

For example:

<style>
.carousel {
  position: relative; }
.slide {
  position: absolute;
  right: 0; } // or left
</style>

or

<style>
.slide {
  float: right; } // or left
</style>

I’d note that if you’re using a jQuery plugin for the carousel, there is likely a stylesheet or injected styles from jQuery that affect the slide’s position.