.App { font-family: Georgia sans-serif; padding: 0; margin: 0; display: flex; flex-direction: column; .main{ display: flex; text-align: center; } } .aside{ min-width: 20%; border-right: 1px solid lightgrey; display: flex; justify-content: start; flex-direction: column; align-items: start; margin: 5px; text-align: start; ul{ list-style: none; margin: 0; padding: 0; } li{ margin: 5px; } } .header{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid lightgrey; .Logo{ margin-left: 5%; } .koshikCounter{ margin-right: 5%; } img{ height: 40px; } } .Cart{ margin: 10px; display: flex; justify-content: center; align-items: center; .wrapperForName{ display: flex; flex-direction: column; .name{ margin: 10px; } } .wrapperForCount{ display: flex; flex-direction: column; .count{ margin: 10px; } } button{ margin: 10px; } } .Content{ display: flex; justify-content: center; align-items: center; flex-direction: column; ul, li{ list-style: none; margin: 0; padding: 0; } .GoodCard{ display: flex; flex-direction: column; align-items: center; justify-content: center; h2{ margin: 5%; } strong{ margin: 2%; } } img{ height: 80px; } } .Footer{ background-color: rebeccapurple; height: 10%; border-top: 1px solid lightgrey; img{ height: 40px; margin: 5px; } }