To get full width use owl-carousel outside your div wrappers.-
- $(document).ready(function() {
- $("#owl-demo").owlCarousel({
- navigation : true
- });
- });
- <div id="owl-demo" class="owl-carousel owl-theme">
- <div class="item"><h1>1</h1></div>
- <div class="item"><h1>2</h1></div>
- <div class="item"><h1>3</h1></div>
- <div class="item"><h1>4</h1></div>
- <div class="item"><h1>5</h1></div>
- <div class="item"><h1>6</h1></div>
- <div class="item"><h1>7</h1></div>
- <div class="item"><h1>8</h1></div>
- <div class="item"><h1>9</h1></div>
- <div class="item"><h1>10</h1></div>
- <div class="item"><h1>11</h1></div>
- <div class="item"><h1>12</h1></div>
- </div>
- #owl-demo .item{
- background: #42bdc2;
- padding: 30px 0px;
- margin: 10px;
- color: #FFF;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- text-align: center;
- }