Flexbox在页面右侧创建空白

Question

Whenever i remove the flex display- it goes away. Can't understand what's happening there. Been going through source up and down, but no element seems to be stretching there.

html of it

<div class="newheadwrap">
<div class="newlogo newhead">with contents</div>
<div class="newtagline newhead" >with contents</div>
<div class="mainhead newhead">with contents</div>
</div>

and the css

.newheadwrap {
-o-display:flex;
-webkit-display:flex;
-ms-display:flex;
-moz-display:flex;
display:flex;  
flex-direction:row;
width:966px;
margin:0 auto;
}
.newlogo {
width:17%;
padding-top:43px;
}
.newtagline {
width:33%;  
color:white;
padding-top:93px;
font-family: berkeleyFont;
font-size:16px;
float:right !important;
}
.mainhead {
width:50%;
}

I know it's not advised to post live links here, but fiddle will not do in this case, so, here is a link https://aps-direct.myshopify.com

Answer 1

One way to remove the extra padding to the right side of your current page:

Add overflow: hidden; to the .newheadwrap

.newheadwrap {
-o-display: flex;
-webkit-display: flex;
-ms-display: flex;
-moz-display: flex;
display: flex;
flex-direction: row;
width: 966px;
margin: 0 auto;
overflow: hidden;
}

You have extra space because of this:

.span9 {
width: 717px;
}

reduce the width and it will fit