응답보기 경계에서 div에 표시되지 않습니다

Question

문제점 : 아래의 코드는 데스크탑이나 랜드 스케이프 장치에서 올바르게 작동합니다. 하지만 모바일/응답보기로 전환하면 div 테두리가 표시되지 않습니다. 아래 코드에서 내가 뭘 잘못하고 있는지 모르겠다. 제발이 작은 문제에서 나를 빼내주세요.

헤드 코드 :

<meta name="viewport" content="width=device-width, initial-scale=1"> 

HTML 코드 :

<div class="ah-header"> 
    <div class="ah-logo"></div> 
    <div class="ah-navbar-searchbar"></div> 
    <div class="ah-nav"></div> 
</div> 

CSS 코드 :

.ah-header { 
padding: 9px; 
background-color: rgb(25, 118, 210); 
display: table; 
width: 100%; 
min-height: 50px; 
max-height: 150px; 
.ah-logo { 
    display: table-cell; 
    width: 250px; 
    border: 1px solid yellow; 
} 
.ah-navbar-searchbar { 
    display: table-cell; 
    position: relative; 
    /* Firefox */ 
    width: -moz-calc(100% - 500px); 
    /* WebKit */ 
    width: -webkit-calc(100% - 500px); 
    /* Opera */ 
    width: -o-calc(100% - 500px); 
    /* Standard */ 
    width: calc(100% - 500px); 
    border: 1px solid yellow; 
} 
.ah-nav { 
    display: table-cell; 
    position: relative; 
    /* Firefox */ 
    width: 250px; 
    border: 1px solid yellow; 
} 
@media only screen and (max-width : 320px) { 
     .ah-header { 
      padding: 0px !important; 
      display: block !important; 
      max-height: 150px !important; 
     } 
     .ah-logo, .ah-navbar-searchbar, .ah-nav { 
      display: table-row !important; 
      border: 1px solid yellow; 
      height: 50px !important; 
     } 
} 

Answer 1

은설정 display: block; 대신

display: table-row의 측면 노트에 411,843,210 쿼리의 .ah-logo, .ah-navbar-searchbar, .ah-nav 규칙은 내가 제거 모든 !important 그들은 여기에 필요하지 않습니다 그리고 당신은 .ah-header 규칙

.ah-header { 
 
    padding: 9px; 
 
    background-color: rgb(25, 118, 210); 
 
    display: table; 
 
    width: 100%; 
 
    min-height: 50px; 
 
    max-height: 150px; 
 
} 
 
    .ah-logo { 
 
    display: table-cell; 
 
    width: 250px; 
 
    border: 1px solid yellow; 
 
    } 
 

 
.ah-navbar-searchbar { 
 
    display: table-cell; 
 
    position: relative; 
 
    /* Firefox */ 
 
    width: -moz-calc(100% - 500px); 
 
    /* WebKit */ 
 
    width: -webkit-calc(100% - 500px); 
 
    /* Opera */ 
 
    width: -o-calc(100% - 500px); 
 
    /* Standard */ 
 
    width: calc(100% - 500px); 
 
    border: 1px solid yellow; 
 
    } 
 
    .ah-nav { 
 
    display: table-cell; 
 
    position: relative; 
 
    /* Firefox */ 
 
    width: 250px; 
 
    border: 1px solid yellow; 
 
    } 
 
    @media only screen and (max-width: 320px) { 
 
    .ah-header { 
 
     padding: 0px; 
 
     display: block; 
 
     max-height: 150px; 
 
    } 
 
    .ah-logo, 
 
    .ah-navbar-searchbar, 
 
    .ah-nav { 
 
     display: block; 
 
     border: 1px solid yellow; 
 
     height: 50px; 
 
    } 
 
    }

<div class="ah-header"> 
 
    <div class="ah-logo"></div> 
 
    <div class="ah-navbar-searchbar"></div> 
 
    <div class="ah-nav"></div> 
 
</div>

에 브래킷 }을 놓친로