0
Also habe ich eine Navigationsleiste mit einem Dropdown-Menü auf Hover, aber das Problem ist, dass die Elemente in der Liste haben einige zusätzliche padding auf der linken Seite von nirgendwo wie kann ich die padding (ich versuchte zu inspizieren, aber konnte nichts finden).Wie entferne ich den zusätzlichen Platz im Dropdown-Menü?
Hier ist das Problem: 
DIES IST WAS ICH WILL: 
DER CODE:
@import url(https://fonts.googleapis.com/css?family=Raleway:600);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
* {
margin: 0px;
border: 0px;
}
/*Header*/
header {
position: relative;
background-image: url(../img/forheader.png);
background-size: cover;
}
.logo {
background: rgba(224, 228, 40, 0.7);
padding: 2.5%;
}
.logo img {
position: relative;
max-width: 35%;
}
/*Header Over*/
/* NAVIGATION */
nav {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 60px;
z-index: 100;
}
.unfixed {
background-color: white;
-webkit-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
box-shadow: 0px 5px 14px rgba(53, 53, 51, 0.12);
}
.fixed {
background-color: hsla(152, 78%, 41%, 0.9);
-webkit-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
box-shadow: 0px 5px 14px hsla(152, 78%, 41%, 0.54);
}
nav img {
position: absolute;
top: 5px;
left: 5px;
height: 50px;
display: none;
}
ul {
position: absolute;
right: 3%;
line-height: 60px;
height: 60px;
}
ul li {
display: inline-block;
position: relative;
height: 100%;
}
.unfixed ul li a {
text-decoration: none;
font-family: 'raleway';
font-size: 24px;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
color: black;
box-sizing: border-box;
font-weight: 700;
}
.unfixed ul li a::after {
content: "";
display: block;
width: 0%;
position: absolute;
left: 50%;
bottom: 15px;
height: 1px;
background: black;
-webkit-transition: 0.3s linear all;
transition: 0.3s linear all;
}
.unfixed ul li a:hover::after {
width: calc(100% - 30px);
left: 15px;
}
.fixed ul li a {
text-decoration: none;
font-family: 'raleway';
font-size: 24px;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
color: white;
box-sizing: border-box;
font-weight: 700;
}
.fixed ul li a::after {
content: "";
display: block;
width: 0%;
position: absolute;
left: 50%;
bottom: 15px;
height: 1px;
background: white;
-webkit-transition: 0.3s linear all;
transition: 0.3s linear all;
}
.fixed ul li a:hover::after {
width: calc(100% - 30px);
left: 15px;
}
/*DROP DOWN*/
nav ul li {
position: relative;
}
nav ul li ul {
font-family: 'raleway';
color: #fff;
font-size:24px;
height: auto;
text-align:center;
z-index:110;
position: absolute;
left: 0;
right: 0;
top: 60px;
-webkit-transform: scaleY(0);
-webkit-transform-origin-Y: 0;
-webkit-transition:all .5s;
}
.unfixed ul li ul{
width: 150px;
background: rgba(228, 228, 228, 0.87);
box-shadow: 0px 5px 14px hsla(152, 1%, 67%, 0.54);
}
.fixed ul li ul{
background-color: hsla(152, 78%, 41%, 0.9);
width:150px;
box-shadow:0px 5px 14px hsla(152, 78%, 41%, 0.54)
}
nav ul li:hover ul {
-webkit-transform: scaleY(1);
}
/*NAVIGATION OVER*/
/*FOOTER*/
/*FOOTER*/
footer {
position: relative;
background: rgba(28, 29, 38, 0.95);
color: white;
font-family: 'Open Sans', sans-serif;
padding: 30px;
font-size: 13px;
text-align: center;
}
footer h3 {
margin: 5px;
}
footer .social {
font-size: 17px;
}
footer .social img {
width: 40px;
height: 40px;
margin: 10px;
-webkit-transition: 0.4s linear all;
transition: 0.4s linear all;
-webkit-filter: saturate(0);
-moz-filter: saturate(0);
-o-filter: saturate(0);
-ms-filter: saturate(0);
filter: saturate(0);
}
footer .social img:hover {
-webkit-filter: saturate(1);
-moz-filter: saturate(1);
-o-filter: saturate(1);
-ms-filter: saturate(1);
filter: saturate(1);
}
/*FOOTER OVER*/
/* SCROLL BAR AND SELECTION */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: #444;
}
::-webkit-scrollbar-track {
background: #FFF;
-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
border: 1px solid #D8D8D8;
}
::-moz-selection {
color: white;
background: #f01943;
}
::selection {
color: white;
background: #f01943;
}
@media screen and (max-width:850px) {
.fixed ul li a {
text-decoration: none;
font-family: 'raleway';
font-size: 18px;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
color: white;
box-sizing: border-box;
font-weight: 700;
}
.unfixed ul li a {
text-decoration: none;
font-family: 'raleway';
font-size: 18px;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
color: black;
box-sizing: border-box;
font-weight: 700;
}
nav img {
position: absolute;
top: 5px;
left: 5px;
height: 0;
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forum</title>
<link rel="stylesheet" href="../css/nav.css">
<link rel="stylesheet" href="../css/forum.css">
<script src="../js/jquery.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/forum.js"></script>
<link rel="shortcut icon" href="../img/favicon.ico" />
</head>
<body>
<header>
<div class="logo">
<center><img src="../img/logo.png" alt="The Thrive Magazine"></center>
</div>
</header>
<nav class="unfixed">
<img src="../img/logo.png" alt="The Thrive Magazine">
<ul>
<li><a href="..//index.html">Home</a></li>
<li><a href="column.html">Columns</a>
<ul>
<li><a href="column.html">Articles</a></li>
<center> <li><a href="fashion.html">Fashion</a></li>
</center> <li><a href="video.html">Videos</a></li>
<li><a href="interview.html">Interview</a></li>
</ul>
</li>
<li><a href="team.html">Team Thrive</a></li>
<li><a href="sexed.html">Sex-Ed Module</a></li>
<li><a href="forum.html">Share Your Story</a></li>
</ul>
</nav>
<div class = "arts">
<div class="submission">
<center>
<h1>SHARE YOUR STORY</h1>
<form action="submit.php" method="post">
<label>Name :</label>
<input type="text" name="name" placeholder="optional">
<br />
<label>Title :</label>
<input type="text" name="title" placeholder="required" required="required">
<br />
<label>Your Story</label>
<br />
<textarea name="story" required="required"></textarea>
<br />
<input type="submit" name="submit" value="submit">
</form>
</center>
</div>
<div class="row">
<article class="managerfc">
<h1 class="namerest">Submissions</h1>
<h2 class="desigrest">Manager - Fashion Column</h2>
<div class="inforest">
<p>Hi! I'm Jaya, I love fashion and believe that there is no easier way to express yourself than through your clothes.</p>
<br>
<p>Clothes aren't only an expression of who you are but are also a very good medium to share a message with people you meet. Fashion, through its passing conformities, helps to bridge the greater transitions of the process of social change. Life isn't a dress rehearsal; it's the one and only life you've got.</p>
</div>
</article>
<article class="creativedesig">
<h1 class="namerest">Social Feeds</h1>
<div class="inforest">
<p>Hi I'm Anshul, I wish to spread love wherever I go. I do not believe in letting anyone come to me without leaving them a little bit happier. And that is why I have faith in Thrive- It has the power to spread love, happiness, hope... and magic.</p>
</div>
</article>
</div>
</div>
<footer>
<h3>The Thrive Magazine. All Rights Reserved.</h3>
<br>
<h3>Site designed by Dhruv Agarwal, Rasik Raj and Kush Parmar.</h3>
<h3>Introductory movie by Jahanvi Chopra.</h3>
<h3>Photographs by Jatin Kumar Sawhney.</h3>
<br>
<br>
<div class="social">
We are social
<br>
<a href="https://www.facebook.com/thethrivemag" target="_blank"><img src="../img/fb.png" alt="Social - Facebook"></a>
<a href="https://twitter.com/thethrive_mag?lang=en" target="_blank"><img src="../img/twitter.png" alt="Social - Twitter"></a>
<a href="https://instagram.com/thethrivemagazine/" target="_blank"><img src="../img/insta.png" alt="Social - Instagram"></a>
<br>
Reach us at:<br>
<u>[email protected]</u>
</div>
</div>
</footer>
</body>
</html>