cssで意図していないプロパティが当たっているのか期待している表示にならない

Question

写真1枚目の右側にあるcreate your account! というテキストがmessage1クラスでloginというテキストがmessage2クラスなのですがこれらを包み込むようにmessage-containerというクラスを作りました、しかしmessage-containerクラスはcssでmargin-topやheightを指定しても内包されている２つのクラス(message1とmessage2)が下にずれてくれません。

期待しているviewの完成形はこれらの2つのテキストが下方向にずれ写真に接するギリギリのラインに移動してくれることです。

こちらの問題を解決できるかた何卒よろしくお願いいたします！????‍♂️????

index.html.erbです。

<header>
  <div class="box">
    <!-- ハンバーガーメニューのアイコン -->
    <div class="hamburger" id="hamburger">
      <!-- 1番上の線 -->
      <span class="inner_line" id="line1"></span>
      <!-- 真ん中の線 -->
      <span class="inner_line" id="line2"></span>

      <!-- 1番下の線 -->
      <span class="inner_line" id="line3"></span>
    </div>
    <div class="first-message">
      <p>SwapApp</p>
    </div>
    <!-- ナビメニュー -->
    <nav id="nav">
      <ul>
        <li><a href="#">SUMPLE1</a></li>
        <li><a href="#">SUMPLE2</a></li>
        <li><a href="#">SUMPLE3</a></li>
      </ul>
    </nav>
    <% if user_signed_in? %>
    <div class="message">
      <%= "#{current_user.nickname} is already logged in." %>
      <%= link_to "Logout", destroy_user_session_path, method: :delete %>
    </div>
    <%= link_to root_path do %>
    <% image_tag 'note-pencil.jpeg' ,class: "link-category1"%>
    <% end %>
    <% else %>
    <div class="message-container">
      <div class="message1">
        <%= link_to "Create your account!", new_user_registration_path %>
      </div>
      <div class="message2">
        <%= link_to "Login", new_user_session_path %>
      </div>
    </div>
  </div>
  <% end %>
  </div>
  <div class="hero-image">
  </div>
</header>
<h1>aaa</h1>
<%#= link_to root_path do %>
<%#= image_tag '' ,class: "link-category1"%>

index.cssです。

.box {
  display:flex;
  position: relative;
}

header{
  z-index:1;
  width:100%;
  height:20vh;
}

body{
  background: #b4ada9;
  color: #505962;
  margin:0;
  /*background-image: url("/for-swapapp.jpg");*/
  height:100%;
  background-size:cover;
  background-repeat:no-repeat;
}

.test {
  height:1000px;
}

h1 {
  margin:1000px 0;
}

.hero-image {
  z-index:0;
  position: absolute;
  background-image:url("for-swapapp.jpg");
  width: 100vw;
  height: 130vh;
  background-size:cover;
  background-repeat:no-repeat;
}

.first-message {
width:200px;
margin: auto;
}

.first-message p{
  padding:20px 0;
  font-family: 'Noto Sans JP', メイリオ;
  font-size:1.5rem;
  height:70px;
  text-align:center;
}

.message-container {
  position:relative;
  z-index:1;
  height:30px;
  width:200px;
display:contents;
  justify-content: flex-end;
  margin:0;
}

.condition{
 position:relative;
 display:flex-end;
}

.top-image-container {
    width: 100%; /*幅いっぱい!の時は100%*/
    height: 88vh;/*画面に対しての高さ*/
    background: url("for-swapapp.jpg") no-repeat center/cover;
    z-index:0;
}

#ul {
  z-index:9998;
}

/*以下javascript(サイドメニュー)*/

.message1 {
position:relative;
margin-right:1%;
text-align-last: end;
font-family: fantasy;
}
.message2 {
  position:relative;
  margin-right:2%;
  text-align-last: end;
  font-family: fantasy;
  }
.message1 a {
  text-decoration: none;
  color: #000000;
}

.message2 a {
  text-decoration: none;
  color: #000000;
}

h2 {
text-align-last: center;
}

.form-text-wrap {
  width: 100%;
  margin:0 auto;
}

.form-text-wrap select{
  display: flex;
  margin: 0 auto;
}

.input-birth-wrap p{
position :center;
}

.birthday{
  margin: 0 auto;
}

.actions {
  text-align: center;
  margin: 10px;
}

.icon-image1 {
width: 15%;
height: 15%;
}

.link-category1 {
  position:relative;
  width: 15%;
  height: 15%;
}

.top-image-container img{
 max-width:100%;
 width:85%;
 height: auto;
 /*max-height: 95%;*/
 object-fit: cover;
}

.trigger-container {
  width:100%;
  height:;
}

/*以下ハンバーガーメニューのcss*/

/*以下ナビメニュー*/
#nav{
  position: absolute;
 top: 0;
 z-index:3;
/*ナビメニューを左に隠した状態になる*/
  left: -40%;
  width: 40%;
  height: 100vh;
  background: #ffffff;
 /*０.7秒かけてナビメニューがスライドする*/
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
  font-size: 20px;
}
#nav a{
  display: block;

  text-decoration: none;
  color: #000000;
  margin: 0 15px;
  padding: 10px;
  transition: .5s;
}
#nav li a:hover{
  color: #ffffff;
  background: #cd5c5c;
  border-bottom: none;
}

.hamburger {
  position:relative;
  height:70px;
  width:150px;
  margin: 25px 0;
  padding:0 10px 0 0;
  display:inline-block;
}

/*ハンバーガーメニューのアイコン*/
.hamburger span {
  z-index: 4;
  display: block;
  width:70px;
  height:1vh;
  margin:5px;
  margin-left: 50px;
  cursor: pointer;
  transition: 1s;
}

/*線の縦幅色など*/
.inner_line {
  display: block;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #ffffff;
  transition: 1s;
  border-radius: 4px;
}

/*ハンバーガーの横線*/
#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  top: 40px;
}

/*ハンバーガーメニューの動き*/
.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
/*-45度回転させる*/
  transform: rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
/*45度回転させる*/
  transform: rotate(45deg);
  bottom: 0;
}
 

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

Answer 1

こんにちは。

margin-topやheightを指定しても内包されている２つのクラス(message1とmessage2)が下にずれてくれません。

こうすれば、マージンが効くようになると思います。

.message-container {
  position:relative;
  z-index:1;
  height:30px;
  width:200px;
/* display:contents; これを削除してみてはいかがでしょう*/
  justify-content: flex-end;
  margin:0;
}

---

contents
これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。

<display-box> - CSS: カスケーディングスタイルシート | MDN

追記

これらの2つのテキストが下方向にずれ写真に接するギリギリのラインに移動

タイトルに引きずられて回答しましたが、もしかして、.message1のテキストをボックスに対して下寄せしたい、ということでしょうか。

.message1 {
	display: flex;
	align-items: end;
}

Comments

[korogi]

アドバイスありがとうございます！
すみません返信がかなり遅くなってしまい。
かなりいいところまで行きました！
message1のテキストをボックスに対して下寄せしたい、こちらは期待のものではないので大丈夫です！
本当にありがとうございます！！