リンクを上手くレイアウトできない。

Question

現状と理想は写真の通りです。

.home_linkにwidth:150px;とdisplay:inline-blockを指定してみたのですが上手く反映してくれません。
どなたかアドバイス頂けませんか。

html

<section class="menu-member"> <a href="" class="home_link">４回生</a> <a href="" class="home_link">３回生</a> <a href="" class="home_link">２回生</a> <a href="" class="home_link">１回生</a> </section>

css
.home_link{
color: #BB0000;
border: 1px solid #BB0000;
background-color: #fff;
margin-top: 10px;
padding: 10px 20%;
border-radius: 2px;
}

.home_link:hover{
color: white;
background-color: #BB0000;
transition: color .5s linear;
transition: background-color .5s linear;
}

.menu-member{
margin-top: 100px;
grid-row: menus;

display: inline-block;

}
.home_link{
width: 150px;
}

Answer 1

質問の意図とあっているかはわかりませんが、

.menu-member{
margin-top: 100px;
grid-row: menus;

display: inline-block;
}
.home_link{
width: 150px;
}

こちらは以下のようにするのが正しいのではないでしょうか

.menu-member{
margin-top: 100px;
grid-row: menus;
}
.home_link{
width: 150px;
display: inline-block;
}

Comments

[zynu]

ありがとうございます。解決しました！