Some custom button help please

Hi guys.
I’m trying to learn cutom_fields in the custom button cards.
I’m testing creating a ‘simple’ header card that has 3 cards and i think i’ve got them in the positions i want but the card itself seems to have margins or some kind of padding around the cards making the main card bigger than i want.
I’ve tried allsorts of different options now like adjusting the margins and padding in the card style and in the custom_field options but i can’t seem to figure out how to alter it.
This is roughly how big i want the main card

Untitled

These are the 3 smaller cards showing but the main card is far too large

Untitled2

Thanks for any help
this is the code.

type: custom:button-card
styles:
  card:
    - height: 120px
    - width: 480px
  custom_fields:
    weather:
      - position: absolute
      - left: 4%
      - top: 50%
      - bottom: 50%
    greeting:
      - position: absolute
      - left: 50%
      - right: 50%
      - top: 50%
      - bottom: 50%
    bell:
      - position: absolute
      - right: 4%
      - top: 50%
      - bottom: 50%
custom_fields:
  weather:
    card:
      type: custom:button-card
      show_name: false
      entity: weather.openweathermap
      show_entity_picture: true
      state:
        - value: cloudy
          entity_picture: /local/images/weather/cloudy.png
        - value: rainy
          entity_picture: /local/images/weather/rainy.png
        - value: sunny
          entity_picture: /local/images/weather/sun.png
        - value: pouring
          entity_picture: /local/images/weather/rainy2.png
        - value: rainy
          entity_picture: /local/images/weather/rainy.png
        - value: partly cloudy
          entity_picture: /local/images/weather/cloudy.png
  greeting:
    card:
      type: custom:mod-card
      card:
        type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           Good Evening,
          {% elif (time >= 12) %}
           Good Afternoon,
          {% elif (time >= 5) %}
           Good Morning,
          {% else %}
           Welcome,
          {% endif %}
        subtitle: |
          {{ user }}!
        alignment: start
      card_mod:
        style:
          mushroom-title-card$: |
            /* Style greeting */
            .title {
              --title-font-size: var(--mush-title-font-size, 16px);
              --title-font-weight: var(--mush-subtitle-font-weight, light);
              color: var(--secondary-text-color) !important;
            }
            /* Style name */
            .subtitle {
              --subtitle-font-size: var(--mush-title-font-size, 20px);
              --subtitle-font-weight: var(--mush-title-font-weight, bold);
              color: var(--primary-text-color) !important;
              padding-left: 10px;
            }
            /* Set spacing around greeting */
            .header {
              --title-padding: 0px 0px 0px;
              --title-spacing: 0px;
            }
  bell:
    card:
      type: custom:button-card
      size: 28px
      entity: input_boolean.notifications
      show_name: false
      styles:
        icon: null
        card: null
      state:
        - value: 'on'
          color: black
          icon: mdi:bell-badge-outline
        - value: 'off'
          color: black
          icon: mdi:bell-outline