The problem is, how to get rid of extra indentation in IE11, and the normal display of the text thickness?
.header {color: white;} .logo { display: inline-block; font: 1.2em "NexaHeavy", sans-serif; text-align: center; width: 6.7em; padding: 1.2em 0; background-color: #f26c4f; } .logo .triangle-logo { position: absolute; bottom: 1.7em; left: 7.6em; border: 1.4em solid transparent; border-left: 1.4em solid #f26c4f; } .main-title { display: inline-block; font: 1.8em "NexaRegular", sans-serif; padding-top: 1.4em; padding-left: 1em; } Document
<div class="row"> <div class="col-md-4 col-sm-12 col-xs-12"> <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-md-offset-3 newsletter"> <p>Newsletter</p> </div> <div class="clear-block"></div> </div> </div> 