Centrowanie fixed div z max width w Bootstrap 3 nie działa pod IE11

Potrzebuję wycentrować menu wysuwające się z góry po naciśnięciu przycisku. Wszystko elegancko działa pod firefoxem i chrome, ale z IE11 jest problem, bo menu siedzi po lewej stronie. Reszta atrybutów css działa normalnie.

 
#menu {
margin: 0 auto;
max-width: 850px;
text-align: left;
position: fixed;
top: -600px;
background-color: #fff;
z-index: 1;
left: 0; right: 0;	
}	

W menu jest 1 div .container-fluid, a w nim row -> 4 x col-sm-3

Wrzuć proszę fragment HTML, w którym masz to menu, jak wygląda struktura, kontenery. Jeśli te kontenery, np. wspomniany .container-fluid ma styl, również wrzuć CSS. To co przychodzi mi na pierwszą myśl, to text-align: left w #menu. Możliwe też że inny styl dla szerokości 'sm' powoduje problem.

[Łukasz B.]

	<div id="menu">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3" id="main-menu-col">
				
					<div class="list-group">
						<a href="#" class="list-group-item">O nas</a>
						<a href="#" class="list-group-item">Aktualności</a>
						<a href="#" class="list-group-item">asdasd</a>
						<a href="#" class="list-group-item active">Oferta</a>
						<a href="#" class="list-group-item">Kontakt</a>
					</div>
				
				</div>
				<div class="col-sm-3">
					<h3>Uasd</h3>
					<ul>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
					</ul>
				</div>
				<div class="col-sm-3">
					<h3>asd</h3>
					<ul>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
					</ul>
				</div>
				<div class="col-sm-3">
					<h3>asd</h3>
					<ul>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
						<li><a href="#">asd</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

CSS

 
#menu .list-group {
	text-align: right;
}

#menu .container-fluid {
	padding-left: 0;
}

#main-menu-col {
	padding-right: 0;
}

#menu ul {
	list-style: none;
	padding-left: 0;
}

#menu ul a {
	text-decoration: none;
}

#menu a {
position:relative;
}

#menu h3 {
	font-weight: bold;
	font-size: 1.2em;
}

.list-group {
	margin-bottom: 0px;
}

Przy takiej strukturze, jeśli elementy menu masz wyrównane do lewej, prawdopodobnie jest to dziedziczone z jakiegoś wyższego konteneru. Spróbuj dla kontenerów o klasie col-sm-3 ustawić wyrównanie do środka:

@media (max-width: 991px) { 
    .container-fluid div { 
        text-align: center; 
    } 
}

[Łukasz B.]

Menu jest wciąż po lewej stronie. Wyśrodkował się tekst w kolumnach.

możesz zalinkować do dema, żeby to na własne oczy zobaczyć i zbadać narzędziami deweloperskimi? to jest problem z kategorii tych, których na sucho rozwiązać się nie da

https://jsfiddle.net/DTcHh/9380/

Trzeba rozszerzyć okienko widoku na powyżej 850px, żeby zobaczyć. Na IE menu jest dosunięte do lewej. Na firefoxie wyśrodkowane.

Dopisz do #menu width: 100%.

https://jsfiddle.net/DTcHh/9448/

IE ma problem z max-width jeśli jest ustawiony position: fixed.

[Adam]

Działa, dzięki!