header {
    padding: 1em
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#container__content {
    max-width: 600px;
    width: 600px;
    margin: 0 auto;
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.secondary__container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    margin-bottom:50px;
}

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
}


footer{
    margin-top: auto;
}


    :root {
        --grid-cols: 1;
        --grid-rows: 1;
      }
      
      #container {
        display: grid;
        grid-template-rows: repeat(var(--grid-rows), 1fr);
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        min-height: 500px;
        min-width: 500px;
        max-height: 500px;
        max-width: 500px;
        border: 2px solid black;
        
        
      }
      
      .grid-item {
        border: 1px solid #ddd;
        text-align: center;
      }