Навбар неправильно отцентрован

Question

У меня сейчас проблема на моем веб-сайте, когда мой текст в моей навигационной панели не на 100% посередине. Есть ли способ исправить это. Я хочу, чтобы моя навигационная панель и мое изображение были идеально центрированы на моей навигационной панели. Спасибо, я новичок в Stack, поэтому, надеюсь, вы понимаете мою боль при загрузке, извините за ожидание

 body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: Sans-Serif;
    font-size: 14px;
    background-color:whitesmoke;
}
html {
    scroll-behavior: smooth;
}
* {
    margin: 0 auto;
}

p,h1,h2,h3,h4 {
  padding-left:10%;
  padding-right:10%;
  text-align: justify;
  text-justify: inter-word;
}

#wrap {
    height: 150px;
    background: url(images/header1.png) no-repeat center;
    text-align: center;
    background-color: #FFF;
}

#nav {
    width: 100%;
    margin: 0;
    padding-top: 5px;
    text-align: center;
    list-style: none;
    background-color:rgba(255, 255, 255, 0.171);
}

#nav li {
    display: inline-block;
    text-align: center;
    padding-top:2px;
    text-align: center;
    padding-bottom:8px;
}

#nav li a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    text-align: center;
    color: black;
    font-family: 'Open Sans';
    margin-right:50px;
    margin-left: 35px;
    padding: 8px;
}

#nav li a:hover {
    color: rgb(29, 57, 179);
    text-align: center;
    background-color: rgba(226, 226, 226, 0.637);
    transition: ease-in-out;
    transition-duration: 0.2s;
}
/* End navigation bar styling. */
#content {
  padding: 0 50px 50px;
  width: 1000px;
    height: 800px;
    background-color: whitesmoke;
}
.imagecontainer {
  position: relative; 
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans';
  color: whitesmoke;
  font-size: 43px;
}
       #nav {
            width: 100%;
            margin: 0;
            padding-top: 5px;
            text-align: center;
            list-style: none;
            background-color:rgba(255, 255, 255, 0.171);
        }
        
        #nav li {
            display: inline-block;
            text-align: center;
            padding-top:2px;
            text-align: center;
            padding-bottom:8px;
        }
        
        #nav li a {
            display: block;
            text-decoration: none;
            text-align: center;
            font-weight: 600;
            text-align: center;
            color: black;
            font-family: 'Open Sans';
            margin-right:50px;
            margin-left: 35px;
            padding: 8px;
        }
        
        #nav li a:hover {
            color: rgb(29, 57, 179);
            text-align: center;
            background-color: rgba(226, 226, 226, 0.637);
            transition: ease-in-out;
            transition-duration: 0.2s;
        }

<!-- language: lang-html -->


        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     
          <div id="nav">
            <li><a href="#">ABOUT US</i></a></li>
            <li><a href="#">OUR PRODUCTS</a></li>
            <img width="50px" height="45px" text-align="center" src="file:///C:/Users/trist/Downloads/camera.svg">
            <li><a href="#">FAQs</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">LOGIN</a></li>
            
            </div>

<!-- end snippet -->

Answer 1

ну ... если вы действительно помещаете стили в их правильное место, которое находится в

<style>
...
</style>

внутри раздела заголовка - ваш #nav, который составляет 100% экрана, находится в центре