How can I remove gap between an image and a content?

Question

I have an image and texts (unordered lists), and buttons next to the image, but I'm not able to get the text and buttons closer to the image. I tried inline-block on the class and using fixed position/absolute position but I found using absolute position seems.. not so efficient. Also margin-left didn't work. Is there a simple CSS trick to get the with lists to align left? or close to the image? Below is my code:

li {
    text-align: left;
    padding: 3px;
}

li.title {
    list-style-type: none;
    font-size: 15px;
}

li.author {
    list-style-type: none;
    font-size: 12px;
}

li.isbn {
    list-style-type: none;
    font-size: 12px;
}

li.price {
    list-style-type: none;
    font-size: 12px;
    font-weight: bold;
}

.flexItem {
    display:flex;
    align-items: center;
    margin-left: 10px;
    flex: 1;
}

.flexItem img{
    flex-grow:0;
    flex-shrink:0;
}

.button {
    color: white;
    padding: 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.buttonCart {
    width: 100px;
    background-color: white;
    color: black;
    border: 2px solid #dd1d5e;
}

.buttonCart:hover {
    background-color: #dd1d5e;
    color: white;
}

.buttonOnline {
    width: 100px;
    background-color: white;
    color: black;
    border: 2px solid #dd1d5e;
}

.buttonOnline:hover {
    background-color: #dd1d5e;
    color: white;
}

<div class="flexItem">
    <img src="images/books/holiday/royal_ester.png" alt="Royal Easter" class="image">
        <div class="text">
            <ul>
                <li class="title"> The Royal Easter </li>
                <li class="author"> Marshella Goodsworth </li>
                <li class="isbn"> ISBN123123412 </li>
                <li class="price"> $14.99 </li>
            </ul>
            <button class="button buttonCart">Add to Cart</button>
        </div>
</div>

Answer 1

Remove the padding on the <ul> element:

li {
  text-align: left;
  padding: 3px;
}

li.title {
  list-style-type: none;
  font-size: 15px;
}

li.author {
  list-style-type: none;
  font-size: 12px;
}

li.isbn {
  list-style-type: none;
  font-size: 12px;
}

li.price {
  list-style-type: none;
  font-size: 12px;
  font-weight: bold;
}

.flexItem {
  display: flex;
  align-items: center;
  margin-left: 10px;
  flex: 1;
}

.flexItem img {
  flex-grow: 0;
  flex-shrink: 0;
}

.button {
  color: white;
  padding: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.buttonCart {
  width: 100px;
  background-color: white;
  color: black;
  border: 2px solid #dd1d5e;
}

.buttonCart:hover {
  background-color: #dd1d5e;
  color: white;
}

.buttonOnline {
  width: 100px;
  background-color: white;
  color: black;
  border: 2px solid #dd1d5e;
}

.buttonOnline:hover {
  background-color: #dd1d5e;
  color: white;
}

ul {
  padding: 0;
}

<div class="flexItem">
  <img src="https://via.placeholder.com/200x200.png

C/O https://placeholder.com/" alt="Royal Easter" class="image">
  <div class="text">
    <ul>
      <li class="title"> The Royal Easter </li>
      <li class="author"> Marshella Goodsworth </li>
      <li class="isbn"> ISBN123123412 </li>
      <li class="price"> $14.99 </li>
    </ul>
    <button class="button buttonCart">Add to Cart</button>
  </div>
</div>