Alignment Help

Hello

I’m fairly new to HA and try to setup a Dashboard.

I am now at a point where i don’t know and cannot find the real answer to solve my problem.

I wanna align the second custom-button-card Standort to the right of the horizontal-stack because it should be in the center of the above person

I tried it with margin-left and then i can make it work on the pc. but when i change the display size or use the mobile app the layout is not rigth because the second button card sticks out of the right.

So now i wanna align the card to the right side, that should solve my problem with the layout and after that i can use the margin-left to center it under the above picture?

I need advice and/or directions where to look or read to solve my problem

alignment

Below is my code:

title: Home
views:
  - path: default_view
    title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: person.stefan
                fill_container: false
                primary_info: name
                tap_action:
                  action: none
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                secondary_info: state
                layout: vertical
                icon_type: entity-picture
                card_mod:
                  style: |
                    ha-card {
                      --height: 400px;
                      --icon-size: 100px;
                      --font-size: 50px;
                      background: none;
                      box-shadow: none;
                      background-color: transparent !important;
                      margin-left: 0px;
                      justify-self: center;
                     }
                    a {
                      justify-self: center;
                    }
                    a div {
                      margin-left: 0px !important;
                    }
                    :host {
                     display: grid;
                    }              
                      
              - type: custom:mushroom-entity-card
                entity: person.stefan
                fill_container: false
                primary_info: name
                tap_action:
                  action: none
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                secondary_info: state
                layout: vertical
                icon_type: entity-picture
                card_mod:
                  style: |
                    ha-card {
                      --height: 400px;
                      --icon-size: 100px;
                      --font-size: 50px;
                      background: none;
                      box-shadow: none;
                      background-color: transparent !important;
                     }
                    a {
                      
                    }
                    a div {
                      margin-left: 0px !important;
                    }          
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                name: Standort
                label: null
                styles:
                  card:
                    - height: 30px
                    - width: 100px
                    - margin-left: 60px
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.location_1
              - type: custom:button-card
                name: Standort1
                styles:
                  card:
                    - height: 30px
                    - width: 100px
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  target:
                    entity_id: input_boolean.location_1
                card_mod:
                  style: |
                    ha-card {
                      margin-left: 0px;
                      padding: 5px;
                      justify-self: end;
                     }
                    a {
                      justify-self: end;
                    }
                    a div {
                      margin-left: 0px !important;
                    }
                    :host {
                     display: grid;
                    } 
          - type: conditional
            conditions:
              - condition: state
                entity: input_boolean.location_1
                state: 'on'
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: entity
                  entity: sensor.sm_s918b_geocoded_location
              card_mod:
                style: |
                  ha-card {
                    background-color: transparent !important;
                    box-shadow: none;
                    justify-self: left;
                    margin-left: 10px;      
                   }
                  :host {
                    display: grid;
                  }
          - type: custom:button-card
            color_type: blank-card
          - type: gauge
            entity: sensor.sm_s918b_battery_level
            max: 85
            needle: false
            name: Stefan Akku
            segments:
              - from: 0
                color: '#ff0d00'
              - from: 2.5
                color: '#ff1a00'
              - from: 5
                color: '#ff2600'
              - from: 7.5
                color: '#ff3300'
              - from: 10
                color: '#ff4000'
              - from: 12.5
                color: '#ff4c00'
              - from: 15
                color: '#ff5900'
              - from: 17.5
                color: '#ff6600'
              - from: 20
                color: '#ff7300'
              - from: 22.5
                color: '#ff8000'
              - from: 25
                color: '#ff8c00'
              - from: 27.5
                color: '#ff9900'
              - from: 30
                color: '#ffa600'
              - from: 32.5
                color: '#ffb200'
              - from: 35
                color: '#ffbf00'
              - from: 37.5
                color: '#ffcc00'
              - from: 40
                color: '#ffd900'
              - from: 42.5
                color: '#ffe600'
              - from: 45
                color: '#fff200'
              - from: 47.5
                color: '#ffff00'
              - from: 50
                color: '#ffff00'
              - from: 52.5
                color: '#f2ff00'
              - from: 55
                color: '#e6ff00'
              - from: 57.5
                color: '#d9ff00'
              - from: 60
                color: '#ccff00'
              - from: 62.5
                color: '#bfff00'
              - from: 65
                color: '#b2ff00'
              - from: 67.5
                color: '#a6ff00'
              - from: 70
                color: '#99ff00'
              - from: 72.5
                color: '#8cff00'
              - from: 75
                color: '#80ff00'
              - from: 77.5
                color: '#73ff00'
              - from: 80
                color: '#66ff00'
              - from: 82.5
                color: '#59ff00'
              - from: 85
                color: '#4dff00'
              - from: 87.5
                color: '#40ff00'
              - from: 90
                color: '#33ff00'
              - from: 92.5
                color: '#26ff00'
              - from: 95
                color: '#19ff00'
              - from: 97.5
                color: '#0dff00'
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  box-shadow: none;
                  justify-self: left;
                  margin-left: 50px;      
                 }
                :host {
                  display: grid;
                }       
          - type: entities
            entities:
              - entity: sensor.date_time

add a vertical stack for each person.

i tried that now

without the margin-left it is now in both vertical stacks on the left side

how can i make it in the center?

justify-self: center with and without align-self: center does not work

tried also the card-mod section from the entity cards, also does not make it in the center but background: none works from it

I can change the location with margin-left but then it will be not rightin the center on mobile