HTML/CSS list item has too much space on the left side

Question

I am trying to create an unordered list where the list items are links and when you hover over each link, the background of that list item changes color. I also changed the list-style-type to none which removed the dot next to each item, however, the space where the dot used to be remains. How do I remove this space?

.landing-dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 30px;
  left: 50vw;
  background-color: gray;
  list-style-type: none;
}

.landing-dropdown-item:hover {
  background-color: lightgrey;
}

<ul class="landing-dropdown">
  <li class="landing-dropdown-item"><a>DropDown</a></li>
  <li class="landing-dropdown-item"><a>DropDown</a></li>
</ul>

score 3 · Accepted Answer · answered Jan 17 '21 at 01:37

You need to remove the padding.. with a padding: 0; also changed list-style-type to list-style: none;

  .landing-dropdown{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 30px;
    left: 50vw;
    background-color: gray;
    list-style: none;
    padding: 0;
  }

  .landing-dropdown-item:hover{
    background-color: lightgrey;
  }

<ul class="landing-dropdown">
   <li class="landing-dropdown-item"><a>DropDown</a></li>
   <li class="landing-dropdown-item"><a>DropDown</a></li>
</ul>

GBra 4.669 · Answer 2 · 2021-01-17T01:40:20.313

Try to add this to your CSS:

.landing-dropdown {
   padding: 0;
   margin: 0;
   list-style-type: none;
}

Usually, list tags have some default styling implemented by the browser. For example when Google Chrome will add these styles to your <ul>:

By adding the CSS above, that uses a CSS class instead of the HTML tag, you will have more CSS specificity hence you will override the default styles of the browsers.

An example:

section {
display: flex;
justify-content: space-around;
}


.reset-style {
padding: 0;
margin: 0;
list-style-type: none;
}

<section>

    <div>A list without margin, padding and list-style-type reset
        <ul class="reset-style">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>

    <div>A list with the default styles
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>
<section>

The issue is still persisting – chibiw3n Jan 17 '21 at 01:31 — chibiw3n, Jan 17 '21 at 01:31

score 0 · Answer 3 · edited Jan 17 '21 at 08:07

I would not recommend you to leave the text on the list without any margin or padding to the sides or up and down, however, since you've requested it like that hence I am sharing with you a code snippet doing exactly what you've asked. I have changed the background color or the UL tag since I couldn't see the text well on my end but you can def change it back the desired color of your preference.

I certainly hope this helps, pal. Happy coding!

 .landing-dropdown{
     padding: 0;
     position: absolute;
     display: flex;
     flex-direction: column;
     top: 30px;
     left: 50vw;
     color: #EAECEE;
     background-color: #283747;
     list-style-type: none;
}
 .landing-dropdown-item:hover{
     color: #17202A;
     background-color: #ABB2B9;
}

<ul class="landing-dropdown">
   <li class="landing-dropdown-item"><a>DropDown</a></li>
   <li class="landing-dropdown-item"><a>DropDown</a></li>
</ul>

HTML/CSS list item has too much space on the left side

3 Answers3