Hi I am working on a Tribute Page and want to make two lists(children’s book and adult readers) separated by categories but one of the lists seems to be stuck in a different position. please see the screenshot and a link to codepen. The harry potter series should stay together not on the adult list…!
Thanks!
Hi Eunjisong, the problem is occurring because you have given a margin of 10px in class “list-group-item”. Just remove that and it will solve your problem. You’ve given the top margin 10px either reduce it to less or remove it. Or you can also reduce the font size of the elements in the list to less than 20px.
To help you out the code that will be changed is in the css.
/What you wrote/
.list-group-item {
font-size:15px;
margin: 10px; //here is the problem
list-style-type: none;
}
/*The code should be */
.list-group-item {
font-size:15px;
/here removing the margin/
list-style-type: none;
}
There could be other solutions too, I hope it helps.
