I'm not sure if this is the padding or Margin but link is too big-CodePudding

There I am having a problem with the size of the link. I have no idea how to make it smaller, and whenever I do. I end up making it move or disappear. I followed the tutorial off of Danni Crossing, on how to make a drop-down menu. But the problem is... The button clicking range is way too big and I just want to make it smaller.

     
@font-face {
    font-family: atlantis;
    src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {

    font-family: WHY;
    src: url(FONTS/seguisb.ttf);
}


.WOW {
    font-family: WHY;
    font-size: 55px;
    position: relative; right: 255px; bottom: 20px;

}

.WHAT {

    font-size: 55px;
    position: relative; left: 555px; bottom: 20px;

}
.HOW {
    font-family: atlantis;
    color: black;
    position: relative; left: 1369px; top: 60px;
}   



/*font separation*/


*{

    margin: 0;
    padding: 0;
}
body { 
    background-color: #fbfbfb;
}

nav {
    width: 100%;
    height: 100px;
    background-color: #b5a371;
}

nav p {
    font-family: atlantis;
   color: rgb(255, 255, 255);
   font-size: 25px;
   line-height: 55px;
   float: left;
   padding: 0px 20px;
}

nav ul {
 float: left;

}

nav ul li { 
    float: left;
    list-style-type: none;
    position: relative;
}
nav  ul li a {
    display: block;
    font-family: atlantis;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 22px 320px;

}
nav  ul li ul {
    display: none;
    position: absolute; top: 99px;
    background-color: #370d02;
    padding: 10px;
    border-radius: 9px;
  
}
nav  ul li:hover ul {
    display: block;
 
  
}
nav  ul li ul li  {
    width: 150px;
    border-radius: 4px;

  
}
nav  ul li ul li a {
    padding: 8px 14px;

  
}
nav  ul li ul li a:hover {
    padding: 8px 14px;
    background-color:  #98652c;

  
}



ul {

}

ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}

ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
       <ul>
        <li><a  href="index.html">Home!</a><ul> 
              <li><a href="addimage.html">ADD IMAGE</a></li>
              <li><a href="addidle.html">ADD IDLE</a>  </li>
              <li><a href="appearence.html">APPEARENCE</a></li>
              <li><a href="settings.html">SETTINGS</a></li>
           </ul>
        </li>
        <li><a  href="#">Log in</a></li>
        <li><a  href="#">Make a pocket!</a></li>
     
          
        
    </ul>  
    </nav>
   
</body>
</html>

CodePudding user response：

Removed position: relative; right: 255px; bottom: 20px; from .WOW .WHAT .HOW and padding: 22px 320px; from nav ul li a and now it looks nicer. The rest of your CSS is very messy though.

@font-face {
    font-family: atlantis;
    src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {

    font-family: WHY;
    src: url(FONTS/seguisb.ttf);
}


.WOW {
    font-family: WHY;
    font-size: 55px;
}

.WHAT {
    font-size: 55px;
}

.HOW {
    font-family: atlantis;
    color: black;
}   


/*font separation*/


*{

    margin: 0;
    padding: 0;
}
body { 
    background-color: #fbfbfb;
}

nav {
    width: 100%;
    height: 100px;
    background-color: #b5a371;
}

nav p {
    font-family: atlantis;
   color: rgb(255, 255, 255);
   font-size: 25px;
   line-height: 55px;
   float: left;
   padding: 0px 20px;
}

nav ul {
 float: left;

}

nav ul li { 
    float: left;
    list-style-type: none;
    position: relative;
}
nav  ul li a {
    display: block;
    font-family: atlantis;
    color: rgb(255, 255, 255);
    font-size: 20px;


}
nav  ul li ul {
    display: none;
    position: absolute; top: 99px;
    background-color: #370d02;
    padding: 10px;
    border-radius: 9px;
  
}
nav  ul li:hover ul {
    display: block;
 
  
}
nav  ul li ul li  {
    width: 150px;
    border-radius: 4px;

  
}
nav  ul li ul li a {
    padding: 8px 14px;

  
}
nav  ul li ul li a:hover {
    padding: 8px 14px;
    background-color:  #98652c;

  
}



ul {

}

ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}

ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
       <ul>
        <li><a  href="index.html">Home!</a><ul> 
              <li><a href="addimage.html">ADD IMAGE</a></li>
              <li><a href="addidle.html">ADD IDLE</a>  </li>
              <li><a href="appearence.html">APPEARENCE</a></li>
              <li><a href="settings.html">SETTINGS</a></li>
           </ul>
        </li>
        <li><a  href="#">Log in</a></li>
        <li><a  href="#">Make a pocket!</a></li>
     
          
        
    </ul>  
    </nav>
   
</body>
</html>

CodePudding user response：

You need to change in .Nav change height: 60px; padding-bottom: 15px; and change line-height: 23px; in .ul li change the .WOW and .WHAT

ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
.WOW {
    font-family: WHY;
    font-size: 55px;
    position: relative; right: 255px; bottom: 38px;
    padding-top: 55px;
    line-height: 95% !important;

}

.WHAT {

    font-size: 55px;
    position: relative;
    left: 555px;
    bottom: 31px;
    padding-top: 65px;
    line-height: 10% !important;

 @font-face {
    font-family: atlantis;
    src: url(FONTS/AtlantisInternational-jen0.ttf);
}
@font-face {

    font-family: WHY;
    src: url(FONTS/seguisb.ttf);
}


.WOW {
    font-family: WHY;
    font-size: 55px;
    position: relative; right: 255px; bottom: 38px;
    padding-top: 55px;
    line-height: 95% !important;

}

.WHAT {

    font-size: 55px;
    position: relative;
    left: 555px;
    bottom: 31px;
    padding-top: 65px;
    line-height: 10% !important;

}
.HOW {
    font-family: atlantis;
    color: black;
    position: relative; left: 1369px; top: 60px;
}   



/*font separation*/


*{

    margin: 0;
    padding: 0;
}
body { 
    background-color: #fbfbfb;
}

nav {
    width: 100%;
    height: 60px;
    background-color: #b5a371;
    padding-bottom: 15px;
}

nav p {
    font-family: atlantis;
   color: rgb(255, 255, 255);
   font-size: 25px;
   line-height: 55px;
   float: left;
   padding: 0px 20px;
}

nav ul {
 float: left;

}

nav ul li { 
    float: left;
    list-style-type: none;
    position: relative;
}
nav  ul li a {
    display: block;
    font-family: atlantis;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 22px 320px;

}
nav  ul li ul {
    display: none;
    position: absolute; top: 99px;
    background-color: #370d02;
    padding: 10px;
    border-radius: 9px;
  
}
nav  ul li:hover ul {
    display: block;
 
  
}
nav  ul li ul li  {
    width: 150px;
    border-radius: 4px;

  
}
nav  ul li ul li a {
    padding: 8px 14px;

  
}
nav  ul li ul li a:hover {
    padding: 8px 14px;
    background-color:  #98652c;

  
}


ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}

ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
       <ul>
        <li><a  href="index.html">Home!</a><ul> 
              <li><a href="addimage.html">ADD IMAGE</a></li>
              <li><a href="addidle.html">ADD IDLE</a>  </li>
              <li><a href="appearence.html">APPEARENCE</a></li>
              <li><a href="settings.html">SETTINGS</a></li>
           </ul>
        </li>
        <li><a  href="#">Log in</a></li>
        <li><a  href="#">Make a pocket!</a></li>
     
          
        
    </ul>  
    </nav>
   
</body>
</html>