Is the <ul> tag aligning to the left?

I recently encountered an issue while designing my website. I created a div with a width of 200px on the right side of the webpage, and added a list of links within it. However, I noticed that elements inside the div are aligning slightly to the left, giving the impression of a padding-right effect even though there isn't any such property applied. I am puzzled as to where this discrepancy is coming from.

.nav-menu>ul {
  margin-bottom: 1rem;
}

.nav-menu>ul>li {
  text-decoration: none !important;
  list-style: none !important;
  outline: none !important;
  border-bottom: 1px solid red;
}

.nav-menu>ul>li>a {
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  font-weight: 400;
  display: block;
  line-height: 45px;
  color: #999;
  font-size: 12px;
}

.lnr {
  font-size: 20px;
  padding-right: 10px;
  position: relative;
  top: 3px;
}
<nav class="nav-menu">
  <ul>
    <li><a href="#home" class="pt-link active"><span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home </a> </li>
    <li><a href="#about" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me</a></li>
    <li><a href="#resume" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume</a></li>
    <li><a href="#portfolio" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio</a></li>
    <li><a href="#blog" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog</a></li>
    <li><a href="#contact" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-envelope"></i></span>Contact</a></li>
  </ul>
<</nav>

Thank you!

Here is an image depicting the result I am getting

htmlcss

Answer №1

To apply these styles in your CSS file:

body,html{
  border:0;
  padding:0;
  margin:0;
}


body,
html {
  border: 0;
  padding: 0;
  margin: 0;
}

.nav-menu>ul {
  margin-bottom: 1rem;
}

.nav-menu>ul>li {
  text-decoration: none !important;
  list-style: none !important;
  outline: none !important;
  border-bottom: 1px solid red;
}

.nav-menu>ul>li>a {
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  font-weight: 400;
  display: block;
  line-height: 45px;
  color: #999;
  font-size: 12px;
}

.lnr {
  font-size: 20px;
  padding-right: 10px;
  position: relative;
  top: 3px;
}
<nav class="nav-menu">
  <ul>
    <li><a href="#home" class="pt-link active"><span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home </a> </li>
    <li><a href="#about" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me</a></li>
    <li><a href="#resume" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume</a></li>
    <li><a href="#portfolio" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio</a></li>
    <li><a href="#blog" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog</a></li>
    <li><a href="#contact" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-envelope"></i></span>Contact</a></li>
  </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

use triple quotes for python variable declaration

I am looking to extract information from an HTML file that contains elements with the class name "link". My challenge is to read each line into a variable and then parse it, all while using triple quotation marks. How can I create a string variable that ad ...

pythonhtmlcssparsing

Is it possible to dynamically update the contents of a modal body and modal footer using

I'm dealing with a modal that dynamically populates two sections: modal-body and modal-footer. However, the issue is that only the content of modal-body changes dynamically while modal-footer remains static. Here's an example of the HTML code (w ...

javascriptjqueryhtml

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

Leveraging a vacant CSS class to locate specific HTML elements

While browsing through some HTML code, I noticed the use of classes without any CSS styling attached to them. Instead of using id's, they were simply used to group or identify elements for jQuery selectors: html: <div class=someClass> </div ...

jqueryhtmlcss

In Google Chrome, the :after element on the left is cleared, while other browsers do not

In an effort to create a button using background images in the :before and :after pseudo-selectors for cross-browser compatibility, an issue arose where only Chrome did not display it correctly (Safari results were unknown). HTML: <div class="btn-cont ...

cssgoogle-chrome

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

Experience a glint in the React Suspense with React Router - Struggling with CSS properties post utilizing Suspense and Lazy

I'm experiencing an issue with my code where the CSS properties are not working properly when I wrap the code in suspense. The page loads and the suspense functions as expected, but the styling is not being applied. However, if I remove the suspense, ...

cssreactjsreact-routerreact-suspense

Switch up div content - advertisements at the top or bottom

An issue has arisen where the ads on a website are currently being displayed at the bottom of the source code, but they should actually be visible at the top. Here is the ad placeholder code: <div id="300_250_placeholder"></div> And here is ...

javascriptjqueryhtmlcss

Python: Utilizing the requests library to handle webpage redirections

Update: While this may not directly answer the question I had initially, I was able to find the necessary information in the API which provided a solution for my software. My current task involves logging into a webpage, navigating to another page, and ex ...

pythonhtmlpython-requests

Guide to placing the Drawer component beneath the AppBar in Material-UI

Exploring the capabilities of the Material UI drawer component, I'm looking to position the drawer below the appbar. My goal is to have the hamburger icon toggle the drawer open and closed when clicked: opening the drawer downwards without moving the ...

javascriptcssreactjsmaterial-ui

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

I am currently developing a file upload tool utilizing Valum's Ajax-Uploader as the foundation. The concept is reminiscent of how attaching files works in Gmail. Users should be able to simply drag and drop a file from their desktop into the browser w ...

javascriptcsshtmlwindows-server-2003

Center and align pictures within a stationary container

I am working on a simple webpage that has a fixed footer. In this footer, I want to have 5 images centered with equal distances between them. Below is my HTML/CSS : Footer div : div.fixed { position: fixed; bottom: 0; right: 0; width: ...

htmlcss

Saving Information from an HTML Form Input?

I am currently working on a form that collects information about employees including their name, age, position, and details. When the "Add Record" button is pressed, this information should be added to a designated div. Although I have set up the Object C ...

javascripthtmlarraysvariables

In AngularJS, I've created a collection of checkboxes with a submit button ready to go

One of my goals is to make the cancel button available only when at least one job is selected. Below is my HTML View <table> <tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'"> <td style="widt ...

javascripthtmlangularjscheckbox

Modifying the position of an image in Flask

I am trying to center an image on my webpage and have attempted the following code: <image height="300px" width="300px" src="{{url_for('static',filename = 'img/Rasd.jpeg')}}" > Visit this webpage fo ...

pythonhtmlflask

Performing read and write operations on targeted CSS classes using C#

I'm currently developing a C# application that needs to manipulate CSS files. Imagine you have the following CSS code snippet: .ClassOne { color: #FFFFFF; font-weight:normal; font-size: 9pt; font-family: Tahoma; ...

c#cssparsing

Discover the best way to highlight a specific area using imgareaelect

The code snippet provided is for uploading an image and performing some operations on it using jQuery UI Tooltip. The code includes various scripts and stylesheets to handle the image upload functionality. After uploading an image, the code checks if the ...

javascriptjqueryhtml

Insert Angular HTML tag into TypeScript

I am currently working on creating my own text editor, but I'm facing an issue. When I apply the bold style, all of the text becomes bold. How can I make it so that only the text I select becomes bold without affecting the rest of the text? Additional ...

javascripthtmlcssangulartypescript

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

Child element failing to resize along with parent container

Here is the HTML structure I have for a template.php page within my website. <!DOCTYPE html> <html lang="en"> <head> <title></title> ...... </head> <body> <div id="container"> ...

phphtmlcsscodeigniter