.box {
    margin: 0 auto; /* Doesn't work! */
}

.box {
    margin: 0 auto;
    width: 500px; /* Must have a width! */
}

/* OR use Flexbox */
.container {
    display: flex;
    justify-content: center;
}

.parent {
    /* Height is 0! */
}

.child {
    float: left;
}

/* Clearfix */
.parent::after {
    content: "";
    display: table;
    clear: both;
}

/* OR use overflow */
.parent {
    overflow: auto;
}

/* OR use Flexbox instead */
.parent {
    display: flex;
}

.box1 {
    margin-bottom: 20px;
}

.box2 {
    margin-top: 30px;
}
/* Gap is 30px, not 50px! */

/* Use padding instead */
.box1 {
    padding-bottom: 20px;
}

/* OR use flexbox with gap */
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.container {
    display: flex;
    /* Items overflow! */
}

.container {
    display: flex;
    flex-wrap: wrap; /* Add this */
}

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    /* Actual width is 244px! */
}

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    box-sizing: border-box; /* Width includes padding and border */
}

/* Apply globally */
* {
    box-sizing: border-box;
}

.hero {
    height: 100vh;
    /* Address bar causes overflow on mobile! */
}

.hero {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* OR use JavaScript */
.hero {
    height: calc(var(--vh, 1vh) * 100);
}

.element {
    z-index: 9999; /* Doesn't work! */
}

.element {
    position: relative; /* Must have position! */
    z-index: 9999;
}

.parent {
    z-index: 1;
}

.child {
    z-index: 9999; /* Still behind other elements! */
}

/* Child can't escape parent's stacking context */
/* Move z-index to parent or restructure HTML */
.parent {
    z-index: 9999;
}

.container {
    display: flex;
}
/* Items have different heights */

.container {
    display: flex;
    align-items: stretch; /* Default, ensures equal height */
}

.item {
    /* Don't set height */
}

.flex-item {
    /* Text overflows! */
}

.flex-item {
    min-width: 0; /* Allow shrinking below content size */
    overflow: hidden;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Items don't fill height */
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr; /* Equal height rows */
}

.child {
    position: absolute;
    top: 0;
    /* Positioned relative to body, not parent! */
}

.parent {
    position: relative; /* Create positioning context */
}

.child {
    position: absolute;
    top: 0;
}

.fixed-header {
    position: fixed;
    /* Jumps when scrollbar appears */
}

html {
    overflow-y: scroll; /* Always show scrollbar */
}

/* OR */
.fixed-header {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

.text {
    width: 200px;
    /* Long text overflows! */
}

.text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text {
    vertical-align: middle; /* Doesn't work on block elements! */
}

/* Only works on inline/inline-block/table-cell */
.text {
    display: inline-block;
    vertical-align: middle;
}

/* OR use Flexbox */
.container {
    display: flex;
    align-items: center;
}

.button {
    background: blue; /* Doesn't apply! */
}

#header .button {
    background: red; /* Higher specificity wins */
}

/* Increase specificity */
.header .button.primary {
    background: blue;
}

/* OR use !important (last resort) */
.button {
    background: blue !important;
}

img {
    /* Overflows container on small screens */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

<div>
    <img src="image.jpg">
    <!-- Mysterious white space below! -->
</div>

img {
    display: block; /* Remove inline spacing */
}

/* OR */
img {
    vertical-align: top;
}

.box {
    transition: width 0.3s, height 0.3s;
    /* Janky animation */
}

/* Use transform and opacity for 60fps */
.box {
    transition: transform 0.3s, opacity 0.3s;
}

.box:hover {
    transform: scale(1.1);
}

.box {
    display: none;
    transition: all 0.3s;
}

.box.show {
    display: block; /* Can't transition display! */
}

.box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.box.show {
    opacity: 1;
    visibility: visible;
}

.box {
    display: grid; /* Doesn't work in IE */
}

/* Feature detection */
@supports (display: grid) {
    .box {
        display: grid;
    }
}

@supports not (display: grid) {
    .box {
        display: flex; /* Fallback */
    }
}

* {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    /* Applied to every element! */
}

/* Be specific */
.card {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Avoid universal selector for expensive properties */

/* Add temporary borders to see layout */
* {
    outline: 1px solid red;
}