Remove dots without loosing adjusted formation in CSS

Issue

I am new in this game and I need some help. I researched for solution about my problem before I turn to take help by asking on this website and one of them was the following method:

"

List item with no bullet

Second item

"

By applying this method I loose my adjusted formatting settings even though I do not want that

HTML CODE:

</div>
    <div class= "link-container">
    <h6 class="links">
        
 <li>
     <a href="https://www.visitberlin.de/de/sehenswuerdigkeiten-berlin" class="linkButton.clearbutton"
     itemprop="possibilities"> Sehenswürdigkeiten</a>
        </a>
 </li>

 <li> 
        <a href="https://service.berlin.de/behoerden/" class="linkButton.clearbutton" 
        itemprop="possibilities">Behörden </a>
 </li>

<li>
    <a href="https://www.berlin.de/clubs-und-party/clubguide/a-z/" class="linkButton.clearbutton"
    itemprop="possibilities">Clubs</a>
 </li>

<li>
    <a href="https://www.berlin.de/tourismus/parks-und-gaerten/" class="linkButton.clearbutton" 
    >Parks</a>
 </li>

 <li>
    <a href="https://www.berlin.de/stadtplan/" class="linkButton.clearbutton"
    itemprop="possibilities" >Stadtkarte</a>
</li>
    </h6>
</div>

CSS CODE:

 .link-container {
    background-color: #4e4e4e91;
    border-color:rgba(129, 191, 235, 0.978);
    border-width: 1px;
    border-style: solid;
    height: 50%;
    border: 2px solid rgba(129, 191, 235, 0.978) ;
    border-radius: 30px;

    }

        .links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 100px;
            margin-right: 100px;
        }

        a {
            color: rgb(245, 245, 245);
            text-decoration: none;
            font-weight: bold; 
            border: 1px solid ;
            background: 0;
            font-weight: 600;
            border-radius: 40px;
          
    
    padding: 0 10px;   
        }
        
        a:hover{
            
            color: rgb(129, 191, 235)
            
            
        }

        .input-box {
            background-color: white;
            color: gb(129, 191, 235);
        }

Solution

As Thomas L. mentioned in the comments, you can add a CSS style component to your code to hide the bullet points that are being created for the li tags.

So in each of your li tags you would change them like so:

<li style="list-style: none">

Here is your modified code:

.link-container {
    background-color: #4e4e4e91;
    border-color:rgba(129, 191, 235, 0.978);
    border-width: 1px;
    border-style: solid;
    height: 50%;
    border: 2px solid rgba(129, 191, 235, 0.978) ;
    border-radius: 30px;

    }

        .links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 100px;
            margin-right: 100px;
        }

        a {
            color: rgb(245, 245, 245);
            text-decoration: none;
            font-weight: bold; 
            border: 1px solid ;
            background: 0;
            font-weight: 600;
            border-radius: 40px;
          
    
    padding: 0 10px;   
        }
        
        a:hover{
            
            color: rgb(129, 191, 235)
            
            
        }

        .input-box {
            background-color: white;
            color: gb(129, 191, 235);
        }

<div>
    <div class= "link-container">
      <h6 class="links">
        
     <li style="list-style: none">
         <a href="https://www.visitberlin.de/de/sehenswuerdigkeiten-berlin" class="linkButton.clearbutton" itemprop="possibilities"> Sehenswürdigkeiten</a>
     </li>

     <li style="list-style: none"> 
            <a href="https://service.berlin.de/behoerden/" class="linkButton.clearbutton" 
            itemprop="possibilities">Behörden </a>
     </li>

    <li style="list-style: none">
        <a href="https://www.berlin.de/clubs-und-party/clubguide/a-z/" class="linkButton.clearbutton"
        itemprop="possibilities">Clubs</a>
     </li>

    <li style="list-style: none">
        <a href="https://www.berlin.de/tourismus/parks-und-gaerten/" class="linkButton.clearbutton" 
        >Parks</a>
     </li>

     <li style="list-style: none">
        <a href="https://www.berlin.de/stadtplan/" class="linkButton.clearbutton"
        itemprop="possibilities" >Stadtkarte</a>
    </li>
      </h6>
      </div>
</div>

Answered By - MFerguson