Не могу понять откуда берётся margin справа.
Генерирую список и элементы списка с помощью js:
$('#listItem').append('<ul id = "itemUl"></ul>');
$('#itemUl').append('<li id = "itemListItem">'+prodName+' - '+prodQuant+' шт.<a class="closebutton" id = "deleteFromCart" onclick = "deleteFromCart(this)">×</a><input type = "hidden" id = "deleteProdId" value = "'+prodId+'"></li>');
Нужно переместить крестик снизу вправо, чтобы он был рядом с текстом
У Вас #itemListItem шириной 90%
Если речь про часть подсвеченную оранжевым, то это не margin, это width 90%.
Еще в вас li с одинаковым id - это не очень хорошо, переделайте на класс.
Еще у вас наверное ссылка с крестиком блочный элемент, поэтому спрыгивает вниз строку. Попробуйте сделать блочно-строчным inline-block
Сборка персонального компьютера от Artline: умный выбор для современных пользователей