Extra space above text

How do i remove the extra margin above john gerald to match other cols. THis is the CSS I have I think i have to do margin-top: 0px
I want the name John Gerard Ahern or column 1 to line up with column 2 and 3

#datacontainer > p {
    font-family: Verdana, Tahoma, sans-serif;panam103-test.syr.edu/victims.php
    font-size: 1.81em;
    color: rgb(12, 72, 118);
}
.widget-text a {
    display: inline-block;
    margin-left: 0.25em;
}

.widget-text img {
    padding: 0.15em;
    border: 0.06em solid #ccc;
}
/*Using columns to control how many cols needed*/
ul.list-unstyled.victims-list {
  columns: 3;
  column-gap: normal;
  margin-top: 0px;
}
/*Mobile style is default (2 col for SM size and 3 for LG)*/
@media (max-width: 992px) {
  ul.list-unstyled.victims-list {
    columns: 2;
  }
}

@media (max-width: 576px) {
  ul.list-unstyled.victims-list {
    columns: 1;
  }
}

Code (markup):

 

panam103-test.syr.edu/victims.php this is the page

 

I would start looking at h3 tag, which you have above the list. Try to remove h3 completely and see if that helps. If list is aligned properly, then you found where the problem is.

P.S. You also may want to check your SSL certificate because it's invalid.

 

I removed it and it didnt help... i think there is a extra padding above the name. if i debug and add this to container margin-top: 0px. it fixes it but how do i do it in the code..
thank you

 

i tried this and it seemed to work
ul.list-unstyled.victims-list li:first-child{
margin-top: 0px;
}

 

I didn't work with margins on the list items, or I would have caught this. When you read the specs, you will see that setting columns also sets a new block formatting context. One of the effects of doing that means the margins within the container (li) do not collapse through the containing block (ul). In this case, the first and last list items are affected. The other sibling list items collapse with one another so there is only 12px margin between them. The top list items in columns two and three are already collapsed, so there's no margin between them and the containing block.

@Soupi, you got working solution without knowing why it worked. Here is my more general solution:

  #victims-list li {
   margin: 0 0 12px;
  }

Code (markup):

Since it is common that many developers and nearly all designers do not grok margin collapse, it may be easier to use padding, though that creates issues of it own.

{padding-bottom: 12px;}

Code (markup):

gary

 

I mentioned the specs. Here is the link: https://www.w3.org/TR/css-multicol-1/

I also noted that your list could break within the list item. See also the section on column breaks within the reference.

g