How to center menu css

Question

I done my website and now started to make it responsive, but I got problem. At lowest screen width (below 670px) I put my menu under logo. I centerd logo but I can't center menu under it. Lost whole day with fireBug but can't find mistake I made.

You can see website at address http://www.kamari.info

It is menu at lowest screen widths.

#banner1menu > div.inner {
	color: #ffffff;
	margin-top: 30px;
	text-align: right;
	font-size: 12px;
	font-family: 'open_sanssemibold';
}
#banner1menu ul.menu, #banner1menu ul.maximenuck {
            margin: 0;
            padding: 0;
}

#banner1menu ul.menu li, #banner1menu ul.maximenuck li  {
	margin: 0;
	padding: 0;
	display: inline-block;
	list-style:none;
}

#banner1menu ul.menu > li > a, #banner1menu ul.menu > li > span.separator,
#banner1menu ul.maximenuck > li > a, #banner1menu ul.maximenuck > li > span.separator{
    display:block;
	border-right: #ffffff 2px solid;
	color: #ffffff;
	margin-bottom: 5px;
	padding-right: 12px;
	padding-left: 12px;
	font-size: 12px;
	font-family: 'open_sanssemibold';
}

#banner1menu ul.menu > li:hover > a, #banner1menu ul.menu > li:hover > span.separator,
#banner1menu ul.maximenuck > li:hover > a, #banner1menu ul.maximenuck > li:hover > span.separator {
	color: #555555;
	font-size: 12px;
	font-family: 'open_sanssemibold';

CUSTOM.CSS

#cont1 { height: 32px; }

#head2logo > div.inner {margin-top: -6px;}

#banner1menu ul.menu li.item-118 a { border-right: none;
                                                    padding-right: 0;}

#banner1menu > div.inner {float: right;}

#cont2 { height: 95px; }

.flexslider { z-index: -1; }

#cont2 { position: relative;
                z-index: 9999; }

/*#maincontent > div.inner { margin-top: -25px; }*/
#centar > div.inner { padding: 0 10px; }

.djslider-default .slider-container {border-radius: 10px 10px 0 0; }

.djslider-default .navigation-container .next-button { outline: none;}
.djslider-default .navigation-container .prev-button { outline: none;}

.sakrij {
	display: none !important;
}

@media screen and (max-width: 950px) {

#cont1 { height: 53px; }

#cont1 .flexiblemodule {
	width: 100% !important;
float: none;
}

#head1kontakti > div.inner { margin-top: -15px;}

.sakrij2 {
	display: none !important;
}
.prikaz2 {
	display: inline !important;
}

#cont2 { height: 140px; }

#banner1 {
	height: auto !important;
}
#banner1 .logobloc {
	float :none !important;
	width: auto !important;
}
#banner1 img {
	display :block !important;
	margin: 10px auto 0 auto !important;}

#banner1menu > div.inner {margin-top: 20px;
					float: left;}
#banner1menu ul.menu li.item-101 a {                                                 padding-left: 8px;}

}


@media screen and (max-width: 670px) {

.sakrij3 {
	display: none !important;
}
.prikaz3 {
	display: inline !important;
}
#cont1 { height: 32px; }
#head1kontakti > div.inner { margin-top: 0px;}
#cont2 { height: 190px; }

#banner1menu > div.inner {text-align: center;}
#cont8 {display: none !important;}

}

Answer 1

PROBLEM SOLVED - just removed nav-pills css suffix from my joomla module.

Sorry for bothering you and tnx very much for your effort