My goal is to align the Nav li elements horizontally instead of vertically. I want to remove the list style (bullet points) from the Nav li elements. However, my attempt to achieve this using display: inline-block; & list-style-type: none; has failed?
CSS:
/*styling for the website*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background: transparent;
color: #000000;
border: none;
letter-spacing:0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*Rest of the CSS styling remains unchanged*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4
c0-6.8,5.5-12.4,12.4-12.4
...
</svg>
</a>
<a href="" class="logo" style="display: inline-block;">Logo</a>
...
/*Remaining HTML code stays the same*/