Good day to you all, So i got this problem. I have header and inside there is logo and wrapper with button. I have used margin: 0 auto; to center wrapper with button and than used flex to center buttons inside wrapper, but now when i am changing logo width (width, font-size, padding etc.) it's actually moving wrapper with buttons out of center of header. How can i make my wrapper always on center of header and ignore width of logo?
Here is what i mean: Centering is relative to (width of header)-(width of logo) not just width of header
Here is my fiddle:https://jsfiddle.net/zgf0xajq/1/
body,html{margin:0;padding:0;}
#header{width:100%;height:50px;background-color:blue;}
#logo{float:left;padding:5px 4px;font-size:200%;width:400px;}
#buttonWrapper{background-color:grey;margin:0 auto;width:300px;height:100%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
align-items: center;}
.tButton{float:left;padding:0 5px;}
you can try #logo {position: absolute}. But of course this will only work if there is enough space on the left side for the logo. Otherwise #buttonWrapper and #logo will overlay