レスポンシブデザインのmedia screenについて教えて下さい

Question

twitterのユーザページを参考にレスポンシブWEBデザインを勉強しているのですが、
ブラウザの拡大/縮小でmax-widthを可変させるmedia screenでの挙動について質問です。

<div class="App-container">
	<div class="local-nav">
		<div class="left-content nav">
			<ul class="main-menu">
				<li>メニュー1</li>
				<li>メニュー2</li>
				<li>メニュー3</li>
			</ul>
		</div>
		<div class="right-content nav">
			<button id="btn">ボタン</button>
		</div>
	</div>
</div>

@media screen and (min-width: 1236px){
	.App-container {  max-width: 1190px; }
}
.App-container {
    margin: 0 auto;
    max-width: 890px;
}
.nav li { float: left; }
.left-content { float: left; }

.right-content {
    float: right;
    text-align: left;
}
.local-nav {
	height:46px;
	background-color: #f9f9f9;
}

上記はmedia screenでブラウザサイズが1236px以上の場合はmax-width:1190pxを適用するコードですが、
ブラウザウィンドウサイズ1270pxで上記のコードを表示するとなぜかmax-width:890pxになってしまいます。

max-widthやmedia screenの理解が甘いせいか、
シンプルなコードでも思ったように動かず、解決できないのでアドバイス頂けないでしょうか。よろしくお願いします。

Answer 1

CSS は同じ要素にスタイルを定義した場合、後で記述した方のスタイルが適用されます。

@media screen and (min-width: 1236px){
    .App-container {  max-width: 1190px; }
}

の後に、

.App-container {
    margin: 0 auto;
    max-width: 890px;
}

が記述されいるのでこれが適用されています。
前者のコードを、後者のコードの後ろに移動させればいいでしょう。

Answer 2

後にあるセレクタで上書きされてしまっています。

.App-container {
    margin: 0 auto;
    max-width: 890px;
}
@media screen and (min-width: 1236px){
    .App-container {  max-width: 1190px; }
}

としましょう。