Center .site-header

I’m trying to set the max page width to 80 or 90%. For some reason I’m not able to center the .site-header!? I’m pretty sure this question was asked before, but I did not manage to find a matching post, sorry.

This is my complete custom.css:

    body {
    	width: 90%;
    	margin:0 auto !important;	
    }
    .content-area {
      width: 100% !important;
    	margin: 0 auto !important;
    	float: none !important;
    }
    .site-header {
    	float: none !important;
    	width: 90%;
    	margin: 0 auto !important;
    	text-align: center;
    	padding-top: 10px !important;
      padding-bottom: 10px !important;
    	border-style: dashed;
    	border-radius:20px;
    	border-width: 2px;
    	border-color: rgba(255,255,255,0.2);
    }
    @media only screen and (max-width: 768px) {
    .content-area {
    width: 100% !important;
    max-width: 100% !important;
    }
    }
    .float-header .site-logo {
    	max-height: 50px;
    }
    .site-logo {
        max-height: 100px;
    }
    .site-header.fixed {
        position: fixed !important;
    }
    .roll-button button-slider {
    		background: rgba(0,0,0,0.5);
    }
    /* Normal state */
    .roll-button{
      background-color: rgba(255,255,255,0.2);
      border-color: #000;
      color: #000;
    }

    /* On hover state */
    .roll-button:hover{
    	background: rgba(0,0,0,0.5);
      color: #fff; 
    } 
    nav.posts-navigation {
        display: none;
    }
    .post-navigation {
        display: none;
    }
    nav {
    	background: rgba(0,0,0,0.5);
    	height: 40px;
    	text-align: left;
    	padding-top: 0px;
    	border-radius:20px;
    	width: auto;
    	}

    .slide-item::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0);
    }
    #mainnav ul li a:hover {
    	color: #e0e0e0;
    }
    #mainnav ul li a, #mainnav ul {
    	font-size: 14px;
    	font-weight: bold;
    	padding-top: 4px;
    }
    #mainnav .sub-menu li a {
    		background: rgba(0,0,0,0.65);
    		border-radius:0px;
    	border-top: red;
    }
    #mainnav-mobi ul li a, #mainnav-mobi ul {
    background-color: #000;
    }
    .current-menu-item a, .current-menu-ancestor a {
        color: #FFF !important;
    }
    .site-info.container {
        display: none;
    }
    .tribe-events-nav-pagination {
    	background-color: #FFF;
    }
    .tribe-events-content {
    	width: 100%;
    }
    .tribe-events {
    	width: 100%;
    	background-color: #000;
    }
    .tribe-events-loop .tribe-events-event-meta {
    	font-size: 16px;
    	background-color: #FAFAFA;
    	line-height: 1.5;
    	border-color: #757575;
    	padding: 10px;
    	border-style: dashed;
    			border-radius:10px;
    	border-width: 1px;
    }
    .tribe-bar-disabled {
    	width: 100%;
    }
    .gallery-item {
    	color: #000;
    	font-size: 16px;
    	font-weight: bold;
    	text-align: left;
    }
    .searchandfilter input {	border-radius:5px;}
    .widget-area .searchandfilter li, .widget-area .searchandfilter p { border-radius: 20px;}
    .widget-area { 
    	border-radius: 20px;
    	width: 100%;
    		border-style: dashed;
    	border-width: 2px;
    	border-color: rgba(255,255,255,0.2);
    }

Hello, I’m not sure what exactly is your issue.

Can you please provide some explanatory screenshots?

Kind Regards, Roman.