Добавление рамки и тени вставки окна?

Question

Я пытаюсь добавить черную границу 1px в дополнение к тени вставки. По какой-то причине мой код не работает. Я очень новичок в CSS и HTML, поэтому вы можете быть любезными членами, пожалуйста, дайте мне только советы, полезные для начинающих.

Вот как это выглядит (внизу), и как она должна выглядеть (верх) - за исключением изменений размера и шрифта. Мне просто хотелось бы, чтобы та же тень и стиль границы.

Jfiddle:https://jsfiddle.net/kad7g4uf/

HTML:

  <div id="navContainer"> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Website Design</a></li>   
        <li><a href="#">Art &amp; Poetry</a></li> 
        <li><a href="#">Blog &amp; Other</a></li> 
        <li><a href="#">Music &amp; More</a></li> 
        <li><a href="#">Shop</a></li> 
       </ul> 
      </nav> 
     </div><!--end of nav container div--> 

CSS:

.container { 
    width: 960px; 
    padding: 0 10px; 
    margin: 0 auto; 
} 


#navContainer { 
    width: 100%; 
} 

#navContainer nav { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#navContainer ul { 
    list-style: none; 
    list-style-type: none; 
    padding: 0px 0px; 
    margin: 0px 0px; 
} 

#navContainer li { 
    float: left; 
    width: 16.666667%; 
    text-align: center; 
} 

#navContainer a { 
    text-decoration: none; 
    display: block; 
    background-color: #005073; 
    line-height: 30px; 
    height: 30px; 
} 

#navContainer a { 
    text-decoration: none; 
    display: block; 
    background-color: #005073; 
    line-height: 30px; 
    color: #EBEAEA; 
    text-shadow: 
     -1px -1px 1px rgba(0, 0, 0, .6), 
     1px -1px 1px rgba(0, 0, 0, .6), 
     -1px 1px 1px rgba(0, 0, 0, .6), 
     1px 1px 1px rgba(0, 0, 0, .6); 
    font-weight: 600; 
    background-image: -webkit-linear-gradient(rgba(0,0,0,.2), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */ 
    background-image: -o-linear-gradient(rgba(0,0,0,.2), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */ 
    background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */ 
    background-image: linear-gradient(rgba(0,0,0,.2), rgba(125,125,125,.3)); /* Standard syntax */ 
} 

#navContainer a:hover { 
    color: #E1E0E0; 
    background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Safari 5.1 to 6.0 */ 
    background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Opera 11.1 to 12.0 */ 
    background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Firefox 3.6 to 15 */ 
    background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* Standard syntax */ 
} 

Jfiddle выше кода

Answer 1

CSS

#navContainer { 
    width: 100%; 
    border : 1px solid #000; 
    background-color: #005073; 
} 

.shadow { 
    -moz-box-shadow: inset 0 0 10px #000000; 
    -webkit-box-shadow: inset 0 0 10px #000000; 
    box-shadow:   inset 0 0 10px #000000; 
} 

HTML

<div id="navContainer" class="shadow"> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Website Design</a></li>   
        <li><a href="#">Art &amp; Poetry</a></li> 
        <li><a href="#">Blog &amp; Other</a></li> 
        <li><a href="#">Music &amp; More</a></li> 
        <li><a href="#">Shop</a></li> 
       </ul> 
      </nav> 
      <div style="clear:both"></div> <!-- I've add this code --> 
</div><!--end of nav container div--> 

Why doesn't the height of a container element increase if it contains floated elements?

, поэтому вы должны добавить этот код

и вы должны удалить атрибут bakcground-цвета в вашем CSS "#navContainer a"