.yoga { box-sizing: border-box; position: relative; border: 0 solid black; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-shrink: 0; } .yoga span { display: flex; color: white; align-self: center; justify-content: center; flex: 1; } .yoga.sample { border: 1px solid #ccc; border-radius: 3px; margin: 50px; margin-left: 0px; margin-right: 0px; max-width: 100%; } .gist { width: 600px; margin: 50px; margin-left: 0px; margin-right: 0px; max-width: 100%; } .gist .gist-meta { display: none; } .gist .gist-data { border-bottom-width: 0px !important; } .gist .gist-file { border-color: #ccc !important; margin-bottom: 0px !important; } .blockContent { width: 600px; max-width: 100%; } .layoutsample { align-items: flex-end; margin-right: 50px; } .gistsample { align-items: flex-start; margin-left: 50px; } .imageAlignSide .blockContent { display: flex; flex: 1 1; flex-direction: column; justify-content: center; } @media only screen and (max-width: 1320px) { .imageAlignSide .blockContent { flex-direction: row; justify-content: center; align-items: center; } .layoutsample { flex-direction: row; justify-content: center; align-items: center; margin-right: 0px; } .gistsample { margin-left: 0px; } .gridBlock .imageAlignSide { display: flex; flex: 1 1; flex-direction: column; justify-content: center; } }