Search code examples
htmlcssmarginpadding

How can I remove white space between divs?


I'm working on my portfolio site, and I have no idea how to get rid of the white space.

Based on the inspect element there is styling to ul.AMSI but it is not used in my styles.css

image is hosted at https://i.sstatic.net/Oke33.png

I tried to inspect element, but it doesn't help.

Any hints on this will be much appreciated.

URL : https://portfolio-thomas-2019.herokuapp.com/


update

Thanks again for the support

what I have tried

removing all AMSI Li padding and margin

.AMSI li {
    list-style: none;
    display: inline-block;
    text-align: center;
    color: #EC7108;
}

commented out margins and paddings in different areas around my issue in hopes of finding the issue but I cannot find it.

I went to the extremes of changing the body background to the hex #EC7108.

Given my experience I don't know of any other angles to approach my issue but ask all the great developers out there.


Solution

  • The <ul> element is part of the problem. You should add this style to it

    .AMSI {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    

    this by itself does not fix it. However, there is a stray <p></p> on the page, just after this <ul> element.

    You should remove this <p> tag (assuming it's empty because you are not using it.) This <p> tag has a margin-bottom of 1rem which is causing the white space