body{ position: relative; } .translate{ padding: 20px 200px; border: 1px solid #59b1eb; background: #59b1eb; text-align: center; color: #fff; width: 100%; } /*丸*/ .inner { display: flex; justify-content: space-evenly; margin: 0 auto; padding: 0; position: absolute; top: 28%; } ul li { list-style: none; } a { text-decoration:none; } .circle{ display: inline-block;/* ←忘れない! */ width: 70px; height: 70px; background-color: skyblue; border-radius: 50%;/* ←円を作る */ text-align: center;/* ←文字を左右に中央揃え */ line-height: 70px;/* ←文字を上下に中央揃え */ margin: 0 10px; } /*about*/ .about{ margin-top: 70px; position: relative; text-align:center } .waku{ margin-right: 5%; margin-left: 5%; border: double 5px #4ec4d3; padding-right: 20px; padding-left: 20px; } .item-list { padding-top: 30px; display: flex; justify-content: space-evenly; } .item-list .item { display: flex; flex-direction: column; width: 31%; margin: 0; padding: 0 0 20px 0; box-sizing: border-box; background: #eee; } .item-list .item .image { margin: 0; padding: 0; flex: 0 0 auto; } .item-list .item .image img { padding-top: 30px; width: 100%; } .item-list .item .title { text-align: center; margin: 10px 0 0; padding: 0 20px; font-weight: bold; font-size: 20px; } .item-list .item .description { margin: 5px 0 20px; padding: 0 20px; font-size: 16px; flex: 1; } .item-list .item .link { margin: 20px 0 0; padding: 0 20px; font-size: 16px; text-align: center; } .item-list .item .link a{ display: inline-block; padding: 10px 20px; text-align: center; background: blue; color: #FFF; font-weight: bold; text-decoration: none; box-sizing: border-box; border-radius: 4px; }