widthの％指定の基準が親要素になっていない

前提・実現したいこと

widthの％指定の疑問を解決したい

発生している問題・エラーメッセージ

widthを％指定すると親要素からの相対基準ではなく、その要素の元のサイズからの基準となってしまう。

コード


 
 
  <footer>
    <div class="footer-main">
      <div class="profile">
        <img src="profile-m.png" alt="">
        <strong>
         John Doe
        </strong>
        <div class="footer-icon">
        <a class="fa fa-twitter" href=""></a>
        <a class="fa fa-facebook" href=""></a>
        <a class="fa fa-instagram" href=""></a>
        </div>
        
        
        
        <p>
          これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。
        </p>
      </div>
      <aside class="aside-1">
        <h2>フッター右</h2>
        <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
      </aside>
      <aside class="aside-2">
        <h2>最近の投稿</h2>
        <ul>
         <li>
           <a href="">
             書くためのテーマ
           </a>
           <p>
             ２０１８年９月１日
           </p>
        </li>
         <li>
           <a href="">
             画像付きの投稿
           </a>
           <p>
             2018年3月５日
           </p>
        </li>
         <li>
           <a href="">
             引用付きの投稿
           </a>
           <p>
             ２０１８年3月５日
           </p>
          </li>
        </ul>
      </aside>
      <aside class="aside-3">
        <h2>カテゴリー</h2>
        <ul>
          <li>
            <a href="">
              サンプル投稿
            </a>
          </li>
          <li>
            <a href="">
              投稿フォーマット
            </a>
          </li>
          <li>
            <a href="">
              普通の投稿
            </a>
          </li>
        </ul>
      </aside>
      <div>
        <input type="text" value="検索..." >
      </div>
    </div>
    <div class="copyright">
      <a class="fa fa-twitter" href=""></a>
        <a class="fa fa-facebook" href=""></a>
        <a class="fa fa-instagram" href=""></a>
Powered by WordPress | Theme: Write by Themegraphy
      
    </div>
   

  </footer>
</body>
</html>

body{
  padding:60px 100px;
  font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif ;
}
header{
  display: flex;
  padding-bottom: 85px;
  .header-title{
    a{
      font-size: 36px;
      font-weight: 700;
      line-height: 43px;
      color: #111111;
      text-decoration: none;
      font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
     }
    p{
      font-size: 16px;
      line-height: 25px;
      color: #777777;
    } 
  
  }
  .header-menu {
    margin:  0 auto;
    padding-top: 30px;
    li{
      list-style: none;
      display: inline-block;
      padding: 0 20px;
      
    a{
      text-decoration: none;
      font-size: 17px;
      line-height: 52px;
      color: #777777;
      font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
      &:hover{
        color: #c49029;
      }
    }
  }


  }
}
.contents-wrapper{
  padding-bottom: 50px;
  border-bottom: #e6e6e6 1px solid;


  .top-wrapper{
   h2{
     font-size: 27px;
     color: #777777;
     line-height: 49px;
     font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
     font-weight: normal;
     padding:90px 0;
   }
  }
 .main-wrapper{
   .article{
     display: flex;
     justify-content: space-between;
     padding-bottom: 80px;
     
     p{
       
       a{
         color: #444444;
         font-size: 17px;
         line-height: 30px;
         font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
         text-decoration: none;
         display: block;
         width: 150px;
         
         
         
       }
     }
     .article-right{
       padding-left: 200px;
       
       
     h1{
       a{
         text-decoration: none;
         color: #111111;
         font-size: 22px;
         line-height: 29px;
         font-weight: 700;
         font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;;
       }
     }
     

     .article-text{
      color: #666666;
      font-size: 17px;
      line-height: 30px;
      font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
      

     }
    }
    }

   }
   .btn-wrapper{
     text-align: center;
     span{
       display: inline-block;
       padding: 15px ;
       border: #ddd solid 1px;
       background-color: #e6e6e6;
     }
     a{
       text-decoration: none;
       border: #ddd solid 1px;
       padding: 10px 15px;
       color: #ddd;
     }
   }
 } 
 footer{
   padding-top: 100px;
   .footer-main{
     display: flex;
   .profile{
    position: relative;
     width: 55%;
      
     
     
     
     img{
     border-radius: 50%;
     width: 100px;
     

   }
    strong{
      font-size: 19px;
      line-height: 34px;
      color: #333333;
      font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
      font-weight: 600;
      position: absolute;
      top: 25px;
      left: 130px;
    }
    .footer-icon{
      position: absolute;
      top: 50px;
      left: 130px;
      margin-top: 15px;

   .fa{
     vertical-align: mi;
     display: inline-block;
     color: #999;
     text-decoration: none;
     font-size: 24px;
     line-height: 30px;
     font: normal;
     padding-right: 10px;
     
     
   }
  }
  p{
    font-size: 17px;
    line-height: 30px;
    color: #666666;
  }


 }
 .aside-1{
   margin-left: 70px;
   width: 50%;
   h2{
     color: #333333;
     font-size: 14px;
     line-height: 20px;
     margin-bottom: 20px;
   }
   p{
     font-size: 16px;
     line-height: 29px;
     color: #666666;
   }
 }
 .aside-2{
  h2{
    color: #333333;
    font-size: 14px;
    line-height: 20px;
  }
  a{
    font-size: 17px;
    line-height: 30px;
    color: #666666;
  }
  p{
    font-size: 15px;
    line-height: 26px;
    color: #999999;

  }

 }
 .aside-3{
  h2{
    color: #333333;
    font-size: 14px;
    line-height: 20px;
  }
  a{
    font-size: 17px;
    line-height: 30px;
    color: #666666;
  }
  p{
    font-size: 15px;
    line-height: 26px;
    color: #999999;

  }
 }
}

 }

試したこと

widthの値を変えたりした。
％の基準のことについてググった。しかし、親要素が基準となるとしか出てこなかった

補足情報（FW/ツールのバージョンなど）

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ここにより詳細な情報を記載してください。
widthの％指定が親要素が基準になっていません。なぜその要素がの元のサイズが基準となっているのでしょうか。また、親要素を基準にするには、どうすればよろしいのでしょうか。
よろしくお願いします。
これだけじゃコードが足りなくてわからないなどありましたら追加しますのでコメントでお願いします。

s8_chu

2020/05/01 08:49 編集

どの要素に対するパーセンテージの計算に疑問があるのか、現状のコードだけではわからないのですが、 `.profile` に適用された `width: 100%` の計算値が `footer` 要素の横幅と異なる、ということでしょうか？もしそうであれば、その問題を再現しないと原因を特定出来ないので、質問文へ問題を再現可能なコードを追記していただけませんか？