Nav переполняется box-shadow

Question

Тэг nav переполняет тень блока в css, отсюда и его граница отображения.Я перепробовал все, от добавления видимости: ничего до использования свойства z-index для тега nav, но ни один из них не работает.Веб-сайт http://www.lvowebdesign.nl. Я знаю, что CSS не чистый и есть много ошибок, но мне нужен кто-то со свежими глазами, прежде чем он сведет меня с ума.Есть много «! Важных», потому что Bulma CSS переопределит CSS.Что происходит с тегом nav?Это можно исправить?

Вот код HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
<!-- <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script> -->
<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
<script defer src="/fontawesome-pro-5.0.2/svg-with-js/js/fontawesome-all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">

<div class="wrapper">
  <header>
  <div>
    <div class="emptyheader">
      <div class="leeuw">
        <embed class="logo"src="logo.svg"/ height="180px">
      </div>
    </div>

    <nav>
      <ul>
        <li>
          <a href="http://www.lvowebdesign.nl/index.php#">
            <img class='imgmessage' src ='graphics/homepage.svg' height='50' width = '50'/>
            Homepage
          </a>
        </li>
        <li>
          <a href="http://www.lvowebdesign.nl/ref.php">
            <img class='imgmessage' src ='graphics/testemonials.svg' height='50' width= '50'/>
            Testimonals
          </a>
        </li>

        <li class="noline">
          <a  class="modalbox" href="contact-master.php" >
            <img class='imgmessage' src ='graphics/email.svg' height='50' width = '50'/>
            Contact 
          </a>
        </li>       
      </ul>
    </nav>
  </div>
</header>

Вот код CSS:

nav {
  padding: 0px 0 0px !important;
  height: 60px !important;
  background: white !important;
}

nav ul {
  text-align: center !important;
  width: 100% !important;
  padding: 0 !important;

  list-style-position: inside !important;
}

nav li {
  list-style: none !important;
  display: inline !important;
  padding: 0 7px !important;
  border-right: solid 1px orangered !important;
}

nav a {
  font-style: normal !important;
  font-size: 18px !important;

  color: orangered;
  text-decoration: none !important;
  ;
}

nav a:hover {
  text-decoration: underline !important;
  color: darkblue;

}

nav li.noline {
  border-right: none !important;
  color: darkblue;

}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,

section {
  display: block;
  z-index: 4 !important;

  box-shadow:
      inset 10px 0px 10px -10px rgba(0, 0, 0, 0.5),
      inset -10px 0px 10px -10px rgba(0, 0, 0, 0.5);
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
  {
  content: '';
  content: none;
}

ul {
  list-style: none
}

button,
input,
select,
textarea {
  margin: 0
}

html {
  box-sizing: border-box
}

*,
::after,
::before {
  box-sizing: inherit
}

a {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 100% !important;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/************** BEGIN STYLES ****************/

/* BACKGROUND COLOR */



article,
nav,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}


body {
  font-family: 'Varela Round', sans-serif !important;

  background: orangered !important;
  background-repeat: repeat-x !important;
  color: #4a4a4a;
  font-size: 1rem;
  font-weight: 400;

  height: 100%;
}

* {
  box-sizing: border-box;
}

/**************** HEADERS  **************/

h2 {
  font-size: 110% !important;
  padding: 0px 5px !important;
  clear: both;
  color: orangered !important;
}

h2 a {
  text-decoration: none;
  cursor: default;
}

h2 a:hover {
  text-decoration: none;
}

h3 {
  padding: 9px 0px 0px 8px;
}

img.portfollo {
  height: 200px;
  width: 400px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;

}

img.floatleft {
  float: left;
}

p {
  text-align: justify !important;
  padding: 9px 5px 0px 8px !important;
}

/**************** LAYOUTS ***************/

/* general margin and padding */


section {
  padding: 35px 75px !important;
}

section {
  padding: 35px 0important;
}

header {
  padding: 2px 5pximportant;
}

footer p {
  margin: 0 75pximportant;
}

footer div p {
  text-align: centerimportant;
}


/* layout continued */


section,
footer,
div.push,
.wrapper {
  background: #fff;
}

.wrapper,
footer {
  width: 100% !important;
  min-width: 768px !important;
  max-width: 1000px !important;
}

.wrapper {
  min-height: 100% !important;
  height: auto !important;
  height: 100% !important;
  margin: 0 auto -155px !important;

}

img.imgmessage {
  vertical-align: middle;
}

#message {
  font-size: 15px !important;
  background-color: white !important;
}


#container {
  display: table !important;
}

#leftcol,
#rightcol,
#content,
#inleftcol,
#inrightcol {
  display: table-cell;
}

#rightcol {
  min-width: 300px !important;
  width: 35%;
  padding: 0 3%;
  border-left: solid 1px #CCC;
}

#content {
  width: 65%;
  padding: 0 3%;
}

#row1,
#row2,
#row3 {}

#rightcol p {}

.innertable {
  display: table;
}

.inrow {
  display: table-row;
}

.inleftcol,
.inrightcol {
  display: table-cell;
  padding-right: 35px !important;

  padding-bottom: 10px;
}

.inrightcol {
  padding: 0 0 0 3%;
}


section {
  height: 100%;
  text-align: justify;
  width: 100%;
}




.push {
  height: 155px;
  /* .push must be the same height as .footer */
  margin: 0 auto;
}

footer {
  border-top: solid 1px #CCC;
  margin: 0 auto;
  padding-top: 15px;

}

footer div {
  margin: 45px auto;
  text-align: center;
}


/* HEADER */

header {
  text-align: center;
  vertical-align: middle;
  margin: 0 auto;
  /* border: 1px solid red; */
  height: 205px;
}

h1 {
  display: block-inline !important;
  width: 900px;
  text-align;
  center !important;
  vertical-align: middle !important;
  font-size: 40px;
  margin-top: 20px !important;
  /* border: 1px solid green; */
  color: #FF6F00;
}

.emptyheader {
  display: block-inline;
  text-align: center;
  /* border: 1px solid red; */
}

.leeuw {
  display: table-cell;


}

Answer 1

Вы также можете добавить свойство box-shadow к навигационной панели, но это просто быстрое решение.Я действительно предлагаю вам организовать ваш код лучше, и вы можете добавить box-shadow к основному div.

nav {
  padding: 0px 0 0px !important;
  height: 60px !important;
  background: white !important;
  box-shadow:
      inset 10px 0px 10px -10px rgba(0, 0, 0, 0.5),
      inset -10px 0px 10px -10px rgba(0, 0, 0, 0.5);
}