mysterious margin-right space that appeared out of nowhere

Why am I experiencing strange right margin space even though I haven't set any margin-right properties?

I have already used a CSS reset with *{margin:0;padding:0;}, so there should be no reason for the margin-right spacing between all ul sections.

The HTML structure is as follows:

<div class="footer-links">

        <ul>
            <li><h3>Title A</h3></li>
            <li><a href="#">Link</a></li>
           
           ...

        </ul>
    </div>

The CSS styling applied to the elements:

.footer-links {
    border: 1px solid #ddd;
   
   ...
    
}
.footer-links a {    
    color: #565656;
}
 
    ...

.footer-links li {
    padding-bottom: 3px;
}

You can view and interact with the code in this jsFiddle link:

http://jsfiddle.net/VrMVU/1/

csshtml-listsmarginfooter

Answer №1

There are gaps separating them, such as the line breaks.

Consider using </ul><ul>

Answer №2

Hopefully this solution resolves your issue! Check out the js fiddle here. The problem was related to the spacing in the code.


    <ul>
        <li><h3>Title A</h3></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    <ul>
        <li><h3>Title B</h3></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    .....

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

Are you struggling with the issue of Function components not being able to be given refs? When you try to access the ref, it just fails. Perhaps you should consider using React.forwardRef

I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors. Initially, I encountered this warning message: "Warning: React does not recognize the con ...

javascriptcssreactjsmaterial-uistyled-components

closing the space between rows at the top

Having trouble adjusting the top margin to match the left and right margins between items. How can I narrow the top gap so it aligns with the spacing of each bootstrap button? https://i.stack.imgur.com/1dZEC.jpg html <div ng-controller="RecipeCo ...

csstwitter-bootstrap

Irregular word spacing observed in HTML code

The alignment of text on my website is causing some spacing issues that I can't quite seem to resolve: It's an asp.net page, and I've attempted a couple of potential solutions: CSS .optionClosed { font-size: large; ...

htmlcss

Ways to prevent flex from expanding all the way to 100% width?

My section has two columns centered in flexbox, but the container doesn't wrap around them as expected and instead fills the whole page. How can I make the section wrap around the text with a padding of 1rem? body { background-color: #444; col ...

htmlcssflexboxcentering

Ensuring that the header contains a centered element and a right-justified element, both aligned perfectly vertically

I'm currently working on creating a unique header design for my website, where I want one element to be centered and another element to be right-justified within the header. After brainstorming different approaches, I came up with the following metho ...

htmlcssweb

CSS animations - transitioning opacity in and out

Looking to add some CSS animations to a menu but running into some issues. I've got the code below for the menu to fade in on hover, but can't quite figure out how to make it fade out smoothly as well. I've tried a few approaches, but all I ...

htmlcsscss-animations

:host background color may be missing, but the font size has been boosted?

Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...

javascriptcssangulartypescript

Reducing the size of a collection of CSS shapes

I'm attempting to position a group of elements in the top left corner of a webpage. Everything looks good when the browser is at its maximum width. However, once the browser width decreases to less than the width of the largest element (outer-circle o ...

htmlcssresponsive

Arranging several lists in columns with a customized header title

I am looking to have 7 lists displayed side by side, each with a unique styled header title. I want the lists to be neatly organized under their respective titles, including the bullets. I attempted to use text-indent for this purpose, but it seems that ...

htmlcssvalidation

Guide to aligning Material UI card in the center (React)

I've been struggling to find a solution for centering a Material UI card in React. Any assistance would be greatly appreciated! Thank you :) link to image on website <Grid container justify="center"> <Card s ...

cssreactjsmaterial-ui

Modifications in SCSS are not reflected in the CSS file

I've encountered an issue with updating my CSS file when making changes to the style.scss file. Even after trying various commands like npm install -g sass and running sass style.scss style.css, I keep getting an error message that says: "File C:&bsol ...

csssass

Swipe up to illuminate div when validation fails

My JSP page includes a form with a div that displays error messages when validation fails. The errors are generated server-side, displayed inside the div using struts property tag. However, the issue I'm facing is that the submit button is located fa ...

jquerycssjsphtmlscroll

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Curious about the level of responsiveness?

I have a project for my school where I need to create a website. I have completed most of it, but I am unsure how to make everything responsive as our teacher specified that we cannot use bootstrap. Unfortunately, I missed the only lesson about it. The ma ...

htmlcss

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

javascriptphpjquerycss

Applying a margin to a CSS div at the bottom may cause it to not

I'm struggling to achieve the desired outcome with my layout: https://i.stack.imgur.com/CvLFl.png I have successfully replicated the image, but only when my div is not floating on the page (without margin applied and without using position: absolute ...

css

Bootstrap 4's Grid System: Embracing the Square Grid

Is there a way to create a dynamic grid of squares in Bootstrap 4? I understand the concept of creating a grid using <div class="row"> <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> <div class="col-m ...

htmlcsstwitter-bootstrapbootstrap-4

Ensure that the width of each column in the table remains constant, unaffected by the content within

I am facing a challenge with an html table where the column is set to a fixed width using table-layout: fixed, but it still expands to accommodate text without spaces. Is there a solution for this issue other than wrapping each td content in a div? For re ...

htmlcss

What is the best way to switch the click event function in jQuery?

I would like to share some code with you: HTML <a href="#" class="button">button</a> <div class="holder"> <img src="http://placehold.it/350x150" /> <div class="content"> <h3>hello there</h3> ...

jqueryhtmlcsstouchmodernizr

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It w ...

cssreactjstabsthemesmaterial-ui