body{ background: slategray; } #eyecatch{ background: url('eyecatch.jpg') no-repeat; background-size: cover; background-position: 50% 20%; height: 100px; } .container { width: 500px; margin: 0 auto; /*background: pink;*/ } header { background: tomato; } ul#menu { padding: 0; margin: 0; list-style-type: none; font-size: 0; } ul#menu > li{ display:inline-block; width: 80px; height: 40px; background: orange; font-size: 16px; text-decoration: none; text-align: center; line-height: 40px; } ul#menu > li > a:hover{ opacity: 0.5; transition: 0.8s; } main .product { position: relative; display: inline-block; } main .price { position: absolute; /*top: 0; right: 0;*/ top: -5px; right: - 5px; font-size: 10px; padding: 4px; font-weight: bold; backgroundf: white; } main { background: skyblue; } #left { background: limegreen; float:left; width: 100px; } #center { background: seagreen; margin: 0 100px; } #right { background: lightgreen; float: right; width: 100px; } .clearfix::after{ content: ''; display:block; clear: both; } .clear { overflow: hidden; } footer { clear: both; background: slategray; }