Ways to eliminate the space separating a parent div and a list within

Is there a way to eliminate the gap on the left that is causing the list to be separated from the div and have the list aligned with the left border?

I attempted setting the li position to absolute and left:0px, but this resulted in overlap and loss of alignment.

Here is a link to my jsfiddle for reference.

Answer №1

ul elements come with default margins that can be removed to get rid of the offset. Once you reset the margins, you can also eliminate the positioning from your ul:

Check out this Demo Fiddle for more details!

.footerlinks {
/* You can delete this part */
    position:absolute;
    left:0px;
    top:0px;
/* Add this instead */
    margin: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

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

Populating Modal on open with jquery/javascript

I am trying to dynamically populate a Modal when it opens, but so far all my attempts using append have failed. Here is the code for my Modal: <div class="modal fade" id="ModalForAllUsers" tabindex="-1" role="dialog" aria-hidden="true"> <div ...

Check the values of the checkboxes entered

I came across a checkbox demo on w3schools It seems like the input doesn't register the checked value when checked. Is this considered valid html? When I tried using this with php forms, the value was showing as "on" when checked. .container { ...

Python script for connecting to mWebSocket Server using WebSocket client

I am in the process of developing a WebSocket client using python that establishes a connection to an Arduino Uno via an Ethernet cable every second. The Arduino Uno is equipped with a WebSocket server using the mWebSocket library. The operational code for ...

PHP - Sending selected option value to index.php to add new user

In my nuevo.php file, which translates to 'new client', I have set up a form to insert data into a MySQL database. The form includes various input fields such as: <label for="Nombre">Nombre : </label><br/> <input width="50" ...

Choosing a tab on a website using Python and Selenium

Displayed above is an image of tab codes found on a web page: https://i.sstatic.net/M54VH.png The tabs are named Overview, Information, and Audit (Please refer to the top part of the image). While I am able to open the tab by clicking with a mouse, I am f ...

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

JS: Initiating a new keypress operation

When I press the Tab key, I want it to do something different instead of its default action. Specifically, I have a text box selected and I would like it to add spaces (essentially making the textarea behave like a text editor). How can I trigger this type ...

The CSS file is connected, however, it is not impacting the appearance of the

Despite linking the css file and seeing it open in the browser inspect mode, it fails to affect the page as intended. Displayed below is my layout.pug file: 1 doctype html 2 html 3 head 4 link(href="/stylesheets/app.css", type="text/css", ...

Leveraging CSS classes for enhancing the bootstrap grid system

Forgive me for the seemingly simple question, but here is my dilemma. Presented below is the current html code: <div class="col-xs-12 col-md-6 col-lg-4"> ...stuff </div> I am wondering how to achieve the following transformation: index ...

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...

What is the best way to display each element of an array individually using just Javascript?

I have created a JavaScript array randomizer that displays the elements one by one with a set interval. However, I would like to modify it so that the elements are shown one at a time upon clicking a button instead of automatically changing after an interv ...

Achieving a minimum width while centering a row in Bootstrap

Excuse me for this somewhat odd query about Bootstrap, but I seem to be a bit scattered today... I would like to change the background color of my container-fluid div so that it covers the entire width of the page. However, I want the child row-fluid div t ...

Ways to retrieve anchor tag values from an AJAX response without a defined class

if(ajaxRequest.readyState == 4) { var response = ajaxRequest.responseText; response=response.split('^^--^^'); var buname=response[5].split('^^|||^^'); //rest code } The AJAX request has returned the following code, now stored in the va ...

Ways to choose tags that do not contain a particular tag within them

I am trying to utilize querySelectorAll to select all i elements that do not contain a font tag. The selector I attempted is: document.querySelectorAll('i > *:not(font)') <i> <font color="008000">Here goes some text</fon ...

Make sure the div can grow in height as needed, but if it reaches the limit of its container, it

UPDATE: I've created a JSFiddle for testing purposes. Below is an example of what I aspire to achieve (with Bootstrap 4 rows and columns): https://i.sstatic.net/hfXno.png The page should only display scrollbars if the second row is fully compress ...

a single button with dual functionalities

I am new to the development field and have a question about jQuery. I want a single button to perform two different actions. For example, let's say we have a button labeled Pause/Resume. When I click on the button, it should first display "Pause", and ...

Modify the color of certain terms within the input field

I'm currently working on an editor for Cucumber feature files. As I write step definitions, I'd like the keywords Given, When, Then, etc. to appear in blue text, and any text between < > brackets to show up in red. Is there a way to change ...

What steps can I take to resolve the issue in my code? I keep receiving a type error stating that it cannot read

I seem to be encountering an issue when running my code where I receive a 'cannot read property 'age' of null'. This error breaks my code, and I'm trying to figure out how to implement a check to ensure it only runs when I am signe ...

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...