ドットインストール - 3分動画でマスターできるプログラミング学習サービス

styles.css

header{
    background-color: #efefef;
    padding-top: 32px;
    padding-bottom: 32px;
}

body{
    margin: 0px;
    color: #333;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.container{
    background-color: pink;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
}

.icon{
    background-color: skyblue;
    margin: 0;
    padding: 0;
}

.info{
    background-color: tomato;
    margin-left: 32px;
}

/*  #09 アイコン画像のスタイリングをしよう */
.icon img{
    border-radius: 50%;
    border: 4px solid white;
    margin: 0;
    padding: 0;
}

/* #10 見出しのスタイルを整えよう */
.info h1{
    font-weight: normal;
    font-size: 24px;
    margin: 0;
}

/*  #11 リストのスタイリングをしていこう */
.info p{
    margin: 0;
    margin-bottom: 16px;
}

.info ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    /* justify-content: space-around; */
}

.info ul li{ margin-right: 8px; }