Document

<div class="row background-logo"> <div class="col-md-4 col-sm-4 col-xs-10"> <div class="logo"> <h1>g</h1> <div class="triangle-logo"></div> </div> <div class="main-title"> <p>Good Inc.</p> </div> </div> <div class="col-md-5 col-sm-6 col-md-offset-3 col-sm-offset-2 newsletter"> <p>Newsletter</p> </div> </div>

It is necessary for the row to have the height of nested blocks, not zero, and so that it can be set to background-color equal to the width of the browser. Page

enter image description here

  • .row {display: table; clear: both;} or .row: after {display: table; clear: both; content: '';} - Lieutenant Jim Dangle

1 answer 1

Here is your menu, you either didn’t connect bootstrap , or did something with .row . Read carefully the documentation. Link as I did.

http://codepen.io/geek_of_cola/pen/gwJLyo

 .header_bar { background: #e9e9e9; min-height: 50px; width: 100%; } .header_bar .header_bar-background-black { background: #000; min-height: 50px; max-width: 1200px; margin: 0 auto; } .header_bar .header_bar-background-black p { color: #fff; } 
 <div class="header_bar"> <div class="container header_bar-background-black"> <div class="row"> <div class="col-xs-3 header_logo"> <p>logo</p> </div> <div class="col-xs-offset-3 col-xs-3 header_some-content"> <p>some content</p> </div> </div> </div> </div><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  • I connected the bootstrap exactly and didn’t touch the row and everything connected with it. - Qop Op