html - Setting the margin in a responsive layout -

<div class = "row">   <div class = "col-sm-12 header_site">      <h1><span class = "header">abc company</span></h1>   </div> </div> 

css code:

.header_site{ background-color: darkblue;} .header{ color: white; margin: 0px 0px 0px 160px;} 

in mobile version layout follows:

setting margin-left: 160px problem. want margin-right 160px in desktop computer follows.

your answer using media queries in css, or more preferably forget left margin entirely , wrap header content .container.

to so, construct html following:

<div class="header_site"> <div class="container">    <div class="row">       <div class="col-sm-12">          <h1><span class="header">abc company</span></h1>       </div>    </div> </div> </div> 

solve issue media queries:

putting following tags keep margin in desktop view, remove once screen small (or adjust margin bit lower @ point)

@media (min-width: 991px) {    .header { margin: 0 0 0 160px; } } 

you can set multiple media queries in css , combine min , max values following:

@media (min-width: 768px) , (max-width: 991px) {    .header { margin: 0 0 0 80px; } /* margin smaller in tablet view, returns 160 pixels in mobile, not ideal situation, example! */ }