Grid problems in Bootstrap version 3

I'm having grid problems in my html with bootstrap it should be like this butinmybrowseritlookslikethis:

HTML:

<header><divclass="container">
         <div class="row">
            <div class="col-md-6">
              <div class="text-left">
                <h3>surpreenda-se</h3>
                <h2>Um tinto leve</h2>
                <h1>e fácil de beber</h1>
              </div>
            </div>

            <div class="col-md-6">
              <img src="images/vinho.png" alt="vinho pedro carvalho">
                <div class="box-right">
                  <div class="text-right">
                    <h3>2012</h3>
                    <h2>Pedro Carvalho</h2>
                    <button type="button">Detalhes</button>
                  </div>
                </div>
            </div>
         </div>
      </div>
    </header>

The CSS:

/*variaveis*/
@colorLinks: #fff;
@colorHovers: #bd8937;
@colorTexts: #333;
@colorBox: #161515;

/*Functions*/
.radius(@corner: 50px){
    border-radius:@corner ;
    -webkit-border-radius:@corner;
    -moz-border-radius:@corner;
    -o-border-radius:@corner;
}


header{
    background-image: url(../images/background.png);
    width: 100%;
    height: auto;
}


.content-general{
    margin-left: 150px;
}

.text-left{
    color: @colorLinks;
    margin-top: 130px;
}

.text-left h3{
    color: @colorHovers;
}

.text-left h2{
    font-size: 3em
}

.text-left h1{
    font-size: 4em;
}

.box-right{
    color: @colorLinks;
    text-align: left;
    background-color: @colorBox;
    padding: 50px;
    width: 350px;
    margin-top: -450px;
}

.box-right button{
    background-color: @colorHovers;
    padding: 10px 30px;
    border: none;
}

.text-right{
    text-align: left;
    margin-left: 100px;
}

I would also like to center these two my columns in the center of the screen without having to use <header> I tried to use height:auto; and margin-left more did not work