Bootstrap width displays incorreclty with Owl caro

Question

I have an issue with width of my bootstrap columns. Without Owl carousel everything works ok, but i don't know why it doesn't work with this plugin. These are just 5 similar blocks of code. Every block starts with .col-md-3 class. The result of this code:

	$(document).ready(function() {
        $(".team-members").owlCarousel({
			autoPlay: 3000,
			items : 4,
			itemsDesktop : [1199,4],
			itemsDesktopSmall : [973,3]
		});
    });

	<section id="team">
		<div class="container">
			<h4>Our team</h4>
			<div class="owl-carousel team-members">
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-3">
					<div class="member">
						<div class="member-img">
							<img src="img/man.png" alt="">
						</div>
						<div class="member-info">
							<span>Jerry Mack</span>
							<i>Web-developer</i>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
						</div>
						<div class="member-contacts">
							<i class="fa fa-facebook"></i>
							<i id="middle-icon" class="fa fa-twitter"></i>
							<i id="last-icon" class="fa fa-google-plus"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

The result of this code: The result of this code

Answer 1

I've found the answer. Owl carousel wraps every element in .owl-item class, so .col-md-3 means 25% of .owl-item class. All you need is write this class in the div with .col-md-3. It should be something like this:

<div class="owl-item col-md-3 col-sm-3">
	<div class="member">
		<div class="member-img">
			<img src="img/man.png" alt="">
		</div>
		<div class="member-info">
			<span>Jerry Mack</span>
			<i>Web-developer</i>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis</p>
		</div>
		<div class="member-contacts">
			<i class="fa fa-facebook"></i>
			<i id="middle-icon" class="fa fa-twitter"></i>
			<i id="last-icon" class="fa fa-google-plus"></i>
		</div>
	</div>
</div>