86473


### 問題

指している所にmarginが反映されていない

###目 標  
marginを反映させる  
news other-service➡の部分

### 目標画像

[![画像の説明をここに入力](https://i.stack.imgur.com/Q2MoV.png)](https://i.stack.imgur.com/Q2MoV.png)  
[![画像の説明をここに入力](https://i.stack.imgur.com/szXOm.png)](https://i.stack.imgur.com/szXOm.png)

### 現在

[![画像の説明をここに入力](https://i.stack.imgur.com/73Q1Q.jpg)](https://i.stack.imgur.com/73Q1Q.jpg)  
[![画像の説明をここに入力](https://i.stack.imgur.com/Ov5Tq.png)](https://i.stack.imgur.com/Ov5Tq.png)

[code]

    HTML
    <section>
     <div class=our-service>
      <div class="content1">
        <div class="Our-Service fadeIn_down fadeIn">
          <h1>Our Service</h1>
        </div>
          <li class="fadeIn_up fadeIn">
           <div class="content1-wrp">
            <div class="content1-imgs1">
              <img src="image/educure01.jpg">
            </div>
             <div class="servis-text">
              <img class=img1 src="./image/black.png" alt="">
               <p class=first-text>DXを推進するエンジニア育成</p>
               <p class=second-text>IT事業参入をご検討中の事業者様向けのサービスです。</p>
             </div>
          </div>
        </li>
      </div>
      <div id="content2">
       <li class="fadeIn_up fadeIn">
        <div class="service-text2">
          <img class=img2 src="./image/logo.png" alt="">
          <p class=first-text>未経験から</br>本気でエンジニアへ</p>
          <p class=second-text>「未経験から本気でエンジニア」を目指すプログラミングスクールです。</p>
       　</div>
    　  <div class=content-imgs2>
          <img src="./image/techpassion01.jpg" alt="">
        </div>
       </li>
      </div>
      <div id="content3">
       <li class="fadeIn_up fadeIn">
    　  <div class=content-imgs3>
          <img src="./image/6c40ac7b707e13491fda6a6b4f02d82d.jpg" alt="">
        </div>
        <div class="service-text3">
          <img class=img3 src="./image/abb886337b510d088a858a59a12bf114.png" alt="">
          <p class=first-text>人生を変える英会話アプリ</p>
          <p class=second-text>登録者25万人！YouTuber講師ジョージ監修！オンライン英会話アプリ！</p>
       　</div>
       </li>
      <div class="other-service fadeIn_right fadeIn">
      <a href="#">Other-service ➡</a>
      </div>
      </div>
    </div>
    <div class="our-divsion">
     <li class="fadeIn_down fadeIn">
      <div class="vision-menu">
        <div class="our-vision fadeIn_down fadeIn">
        <h1>our-vision</h1>
        </div>
      </li>
       <div class="vision-title fadeIn_up fadeIn">
        <h3>世界の課題をITで解決して、</br>関わった<strong>世界中の人たちを幸せにする<strong></h3>
       </div>
        <ul class="vision-service">
          <li class="fadeIn_up fadeIn">
            <p class="vision-text1">ITを通じて</br>人々の可能性を広げる</p>
            <p class="vision-text2">イノベーションを起こし新たな価値を創造する</p>
          </li>
          <li class="fadeIn_up fadeIn">
            <p class="vision-text1">世界を代表する</br>自社サービスを作る</br>人々の可能性を広げる</p>
            <p class="vision-text2">世の中にインパクトを与える</p>
          </li>
          <li class="fadeIn_up fadeIn">
            <p class="vision-text1">世界から選ばれる企業へ</p>
            <p class="vision-text2">常に最高のパフォーマンスを発揮します</p>
          </li>
        </ul>
      </div>
     </div>
    
    <div class=news>
     <li class="fadeIn_down fadeIn">
       <div class="news-menu">
        <div class="news fadeIn_down fadeIn">
         <h1>News</h1>
      </li>
    </div>
    <div class="news-topics">
      <div class="news-topic">
       <div class="news-list fadeIn_up fadeIn">
         <img width="170" height="90" src="/image/prtimes.png">
        <div class="news-text">
         <p>2022-01-14 <a href="#">プレスリリース　メディア<a/> <a href="#">自社サービス</a> </p>
           <a href="#">【プレリリース】DXを促進するリスキング(再教育)サービス</br>「EDUcare(エドゥキュア)」</a>
        </div>
       </div>
       <div class="news-list fadeIn_up fadeIn">
         <img width="170" height="90" src="/image/prtimes.png">
        <div class="news-text">
         <p>2022-10-29 <a href="#">プレスリリース　メディア<a/> <a href="#">自社サービス</a> </p>
         <a href="#">【プレリリース】【プレスリリース】IT人材教育システム「educure」”Cross Education Lab.”
           芝浦工大 新熊亮一教授監修により更にデータドリブンな教育プログラムが提供可能に！</a>
        </div>
       </div>
       <div class="news-list fadeIn_up fadeIn">
         <img width="170" height="90" src="/image/IMG_0218-4-125x125.jpeg">
        <div class="news-text">
         <p>2021-05-01 <a href="#">会社情報<a/> </p>
         <a href="#">本社オフィス移転のお知らせ</a>
        </div>
       </div>
       <div class="news-list fadeIn_up fadeIn">
         <img width="170" height="90" src="/image/prtimes.png">
        <div class="news-text">
         <p>2021-04-01 <a href="#">プレスリリース　メディア<a/> <a href="#">自社サービス</a> </p>
         <a href="#">【プレスリリース】人材派遣の勤怠管理から請求書作成、従業員の給与明細まで
           一元化できる管理システム「kint」をリリース</a>
        </div>
       </div>
       <div class="news-list fadeIn_up fadeIn">
         <img width="170" height="90" src="/image/prtimes.png">
        <div class="news-text">
         <p>2021-03-01 <a href="#">プレスリリース　メディア<a/> <a href="#">自社サービス</a> </p>
         <a href="#">【プレスリリース】未経験からエンジニアになれる、IT人材教育プログラミングスクール「Tech Passion」開講</a>
        </div>
       </div>
       <div class="other-service2 fadeIn_right fadeIn">
         <a href="#">other-service ➡</a>
       </div>
     </div>
    </div>
    
    </section>
    <html>
    
[/code]

css

[code]

    #our-service{
        z-index: 9;
    }
    
    .content1{
        margin:  auto;
        padding-top: 125px;
    }
    
    .content1-wrp{
        display: flex;
    }
    
    h1{
         font-size: 28px;
         font-family: 'Noto Sans JP', sans-serif;
         border-top: solid 2px #2da690;
         max-width: 200px;
         margin: 0 auto;
         font-weight: 500px;
         text-decoration: none;
         padding-top: 4px;
         text-align:center;
         white-space: nowrap;
    }
    
    
    .content1-imgs1 img{
     height:665px;
     width: 665px;
     object-fit: contain;
     right: 42vw;
     bottom: -37vw;
    }
    
    .servis-text{
        height: 340.5px;
        width: 672px;
        position: absolute;
        background-color: #fff;
        right: 13vh;
        bottom: 20vh;
        opacity: 0.9;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .service-text2{
        position: absolute;
        background-color: #fff;
        font-family: 'Noto Sans JP', sans-serif;
        opacity: 0.9;
        height: 373px;
        width: 672px;
        margin-left: 15vh;
        z-index: 2;
    }
    
    .service-text3{
        height: 340.5px;
        width: 672px;
        position: absolute;
        background-color: #fff;
        right: 13vh;
        bottom: 20vh;
        opacity: 0.9;
        font-family: 'Noto Sans JP', sans-serif;
        z-index: 2;
        bottom: 13vh;
    }
    
    .service-text3 img{
        height: 64px;
        width: 76px;
        max-height: 64px;
        max-width: 100%;
        margin-top: 2rem;
    }
    
    .img1{
     display: flex;
     height:100px;
     width: 200px;
     object-fit: contain;
     position: relative;
     margin:40px;
     margin-top: 10px;
    }
    
    .img2{
        display: flex;
        height:100px;
        width: 200px;
        object-fit: contain;
        position: relative;
        margin:40px;
      margin-top: 10px;
    }
    
    .img3{
        display: flex;
        height:100px;
        width: 200px;
        object-fit: contain;
        position: relative;
        margin:40px;
        margin-top: 10px;
    }
    
    .first-text{
     font-size: 32px;
     margin: -20px 0 20px 45px;
    }
    
    .second-text{
        margin:0 0 20px 45px;
        opacity: 0.5;
    }
    
    #content2{
        width: 1120px;
    }
    
    #content3{
      line-height: 5rem;
        width: 100%;
    }
    
    .content-imgs2 img{
        height: 457px;
        width: 684px;
      max-height: 500px;
        max-width: 100%;
      margin:0 0 0 80vh;
        position: relative;
      bottom:10vh;
        z-index: 1;
    }
    
    .content-imgs3 img{
        height: 399px;
        width: 684px;
        max-height: 500px;
        max-width: 100%;
        margin:0 0 0 0vh;
        position: relative;
        bottom:10vh;
        z-index: 1;
    }
    
    .other-service {
        text-align: right;
        margin-bottom: 5rem;
        font-weight: bold;
        padding-right: 2rem;
    }
    
    .other-service a {
        color: black;
    }
    
    .our-divsion{
        padding: 5rem 0 7rem 0;
        background-image: url(./image/bg01.jpg);
        background-size: 100% auto;
    }
    
    .vision-service li {
        width: 33.3%;
    }
    
    .vision-title h3 {
        font-size: 2.6rem;
        font-weight: 400;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 4rem;
    }
    
    .vision-service {
        display: flex;
    }
    
    
    .vision-text1 {
        font-size: 2rem;
        font-weight: 700;
      line-height: 2.5rem;
      color: #2da690;
      margin: 0 0 1.5rem;
        text-align: center;
    }
    
    .vision-text2 {
     margin: 0;
     font-size: 1rem;
     line-height: 1.5rem;
     font-weight: 400;
     color: #808080;
     text-align: center;
    }
    
    .news-topics{
        margin: 0 auto;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        width: 100%;
        max-width: calc( 1120px + 2.5rem * 2);
    }
    
    .news-list{
        display: flex;
        padding: 1rem 0 1rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.12);
    }
    
    .news-list img{
        object-fit: cover;
    }
    
    .news-text {
        padding-left: 1rem;
    }
    
    .news-text a {
        color: gray;
    }
    
    .news-text p a {
        color: black;
    }
    
    .news-text p a {
        color:#C0C0C0;
    }
    
    .other-service2{
        text-align: right;
        margin-bottom: 5rem;
        font-weight: bold;
        padding-right: 2rem;
    }
    
    .other-service2 a {
        color: black;
    }
    
[/code]


CC BY-SA 4.0
2022-02-20T08:37:44.320
86471
2022-02-20T11:27:50.377
2022-02-20T11:27:50.377
19110
51050
question
html css
cssのmarginが効いていない


`.other-service2`には`margin-bottom`しか設定されていないようです。  
`margin-top`を設定すれば良いのでは。


CC BY-SA 4.0
2022-02-20T10:35:16.413
86473
2022-02-20T10:35:16.413
45045
86471
answer