Bootstrap increasing container width. Moving object within row.

Hi, i would like to learn how to increase my container width on my webpage. I would like to know if their is anyway to make it so my image slider and my image can be a little farther away from each other. I would like to know how to freely move my image slider and my picture within a row on bootstrap up and down and also left and right. I am new to bootstrap so if you could explain in detail what i have to do that would be great. Thanks!

My site: http://rootforsite.azurewebsites.net/

My code:

<div class="container">

        <div class="row">

                <div class="col-xs-9">

                        <ul class="bxslider">

                                <li><img src="img/Day1.jpg" width="980" height="280"/></li>

  <li><img src="img/Day1.jpg" width="980" height="280"/></li>

  <li><img src="img/Day1.jpg" width="980" height="280"/></li>

  <li><img src="img/Day1.jpg" width="980" height="280"/></li>

                        </ul>

                </div>

                <div class="col-xs-3">

                        <div class="imagess"> <img src="C:\Users\alex\Desktop\rootforsite\img\pic.jpg" class="img-responsive center-block"  /> </div>

                </div>

        </div>

  <iframe width="640" height="360" src="http://www.youtube.com/embed/mb6SNytt5YI" frameborder="0" allowfullscreen></iframe>

</div>