What is causing the space in front of my bulleted list to appear?

I am striving to achieve the following:

Here is what I have accomplished so far:

I am puzzled by the gap on the left side of the navigation. It seems out of place. You can view the live page at

This is my current markup:-

<footer>
<div id="contact-info">
<p><span id="footer-text-big">Contact Us:</span></p>
<p>
Tel: +974 44151991<br />
P.O.Box: 202315, Doha – Qatar<br />
E-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c9c0cbd3c8d2c0cdc4ccc0cde1c6ccdcc88dcacfcce1dccccec7cd98c5c9cb">[email protected]</a><br />
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c071e051f04020d0d050b06141bf30607071b0546020306074649060905">[email protected]</a>
</p>
</div>
<div id="footer-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="photogallery">Photo Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="copyright">
Copyright &copy; 2014 SALEM AL HAJRI. All Rights Reserved.
</div>
</footer>

This is my CSS code snippet currently in use:-

footer { height: 158px; color:#FFF; margin-top: 25px; padding-top: 30px; font-size: 11px; font-family:Arial, Helvetica, sans-serif;}
#contact-info { float: right; text-align: right;}
#footer-text-big { font-size:13px;}
#footer-nav { float: left; width: 600px; text-align: left;}
#footer-nav li { display: inline;}
#footer-nav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-decoration: none;
margin-right: 30px;
}
#copyright { width: 600px; float: left; text-align: left; margin-top: 65px;}
css

Answer №1

When working with lists (ul and ol), keep in mind that they come with default padding and margin settings. To customize these, you'll need to make manual adjustments in your CSS code:

#footer-nav ul {margin:0; padding: 0;}

You can also specify specific margins and paddings like this:

#footer-nav ul {margin-left:0; padding-left: 0;}

Alternatively, you can set custom values such as:

#footer-nav ul {margin-left: 10px; padding-left: 0;}

If you're using HTML5, consider using the nav element instead of a div with an id of "footer-nav".

Answer №2

Why not give it a shot?

#footer-menu ul{
  margin:0;
}

Answer №3

To properly set the #footer-nav ul padding-left, use the following code snippet:

#footer-nav ul{padding-left:0;}

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

Selenium: Utilizing the get_attribute() function with a CSS query

I am attempting to retrieve the value of the title attribute. There are multiple links on the page and I need to specifically select the first link and extract its title attribute. Here is the selenium command that I have used: self.se.get_attribute("c ...

cssseleniumselenium-rc

Unlimited highway CSS3 motion

I have come across a stunning 2D Highway background image that I plan to use for my mobile racing game project which involves JS and CSS3. The image can be found at this link. My goal is to create an animation of the road in order to give players the illu ...

javascripthtmlcsscss-animations

What is the best way to delete spaces between span elements while preserving the spaces within each individual span tag?

Is there a way to eliminate unexpected spaces that appear between spans? One attempt was made by setting font-size: 0 within the wrapper <div>, which successfully removed spaces not only between <span> tags but also within each <span> ta ...

htmlcssvue.jsvuejs2

The correct way to link a separate CSS stylesheet called "stylesheet" to an HTML page is by using the proper syntax

How can you correctly link a CSS file called "stylesheet" to an HTML page when both files are located in the same directory? ...

htmlcss

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Seeking a way to position a component within a .jsx-file, rather than a .css-file, to accommodate multiple instances of the same component performing various tasks on different parts of the page. Avoiding duplication of files with minor CSS class changes, ...

javascriptcssreactjspositioncss-position

How can I attach a cookie to a div that becomes visible after a few seconds of video playback?

After 20 seconds of video play, a div element appears. I am trying to set up a cookie so that once the div is shown, it continues to appear unless the user clears their cache (cookie logic). This is my current attempt - http://jsfiddle.net/9L29o365/ Any ...

javascriptjqueryhtmlcsscookies

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

My goal is to retrieve an element from a list by clicking on a link containing specific text. Here is the HTML code snippet: <table> <td> <tr><a href='...'>I need help</a></tr> <tr><a href=&a ...

javascripthtmlcssdalekjs

Styling the file upload button to be compatible with all web browsers

When attempting to customize a file upload button to my liking, I encountered difficulties in finding a reliable method without relying on JavaScript. Although I came across two other questions on this topic, the solutions either involved JavaScript or sug ...

htmlcsscross-browserfile-io

What is the best way to restrict the size of a table that is filled with data from a database?

Currently using a combination of React, Node, Express, and Postgres to populate a table with data retrieved from Postgres. The issue arises when the table becomes overly long, prompting the need to display only 5 rows at once while adding a scroll bar for ...

javascripthtmlcssreactjspostgresql

If the DIV does not contain a P tag, then the minimum height of the div should be removed

I have a div that contains an h2 and p tag. I am curious if there is a way to remove the styling from the div if the P tag does not exist. Here is the markup and styling: <style> .hotel-header { min-height: 100px; } </style> <div class="h ...

javascripthtmlcss

What is preventing my JavaScript if-else statement from functioning properly?

I've been experimenting with a mobile-friendly navigation menu, and I'm facing an issue where the menu opens (JS IF statement) but doesn't close (JS ELSE statement). I'm unsure why it's opening but not closing. P.S. I'm new t ...

javascripthtmlcssif-statement

Overflowing CSS grid issue

I've been working on this for a couple of hours, but I haven't been able to get it right. I want to add labels in a grid layout with a maximum of 3 columns. If the items don't fit, they should wrap to the next row. It would be great if the i ...

htmlcsscss-grid

The bottom of the page displays varying outcomes between Code Snippet (CodePen) and Angular

I had the idea of having my footer cover the entire length of the page and stick to the bottom, adjusting itself if more content is added. However, I encountered an issue where on Codepen everything works perfectly, but on Angular (14), the footer does not ...

htmlcssangularflexboxfooter

Pikabu's Uphill Battle with Heights

I'm currently in the process of developing a new off canvas mobile menu for a website project to replace an outdated and faulty version. After some research, I have decided to use https://github.com/mobify/pikabu as it meets all my requirements. Howev ...

javascriptjquerycss

Two tables are positioned using distinct alignments but share a common stylesheet

I have created two tables, one using HTML (with a touch of PHP) and the other with two PHP loops. Starting with the stylesheet: .statistics { font-family: Arial, monospace; font-size: 36px; margin-left: 5%; width: 90%; } .statistics tr { ...

phphtmlcssformshtml-table

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

cssresponsive-design

Issue with [rowHovered] directive in PrimeNG Table when cell-background is defined

I am working with a scrollable TreeTable where I have defined the rowHover attribute in the following manner: <p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeigh ...

htmlcssangularprimeng

Enhance the appearance of your webpage by utilizing the Bootstrap round-circle class along with

I am facing an issue with my Bootstrap carousel that contains multiple items. Here is my HTML code: <div class="carousel w-100 " data-ride="carousel" id="recipeCarousel"> <div class="carousel-inner w-100" role="listbox"> <div c ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...

javascripthtmlcssajax

Retrieving information from the table based on the user currently logged in

I have a scenario with two different tables, NGO and Volunteer. When a volunteer selects an NGO to work with, I want to display only those volunteers who are interested in the current logged-in NGO. Below is the code snippet I am using: [<?php ...

phphtmlcssmysqlmaterialize