marginではない余白がある

問題となっているところ

自作のブログテンプレートを作っているものです。ようやく完成したと思ったのですが、下記の写真のように無駄な余白が右側にあります。chromeの検証ツールで調べてみたところ、marginではなさそうです。

試したこと

viewportの確認
要素がはみ出しているところはないか

問題となっているコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="template3.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@700&display=swap" rel="stylesheet">
    <title>論文テンプレート</title>
</head>

<body>

<header>
      <div class="headerTitle-wrapper">
          <div class="headerTitle">
              <h1>Thesis</h1>
              <p class="title-p">テキストテキストテキスト</p>
          </div>
      </div>
</header>

<div class="main">
<section class="contents">
  <div class="contents-wrapper">

    <div class="contentsText">         <!--題名-->
        <h2>題名テキストテキスト</h2>
    </div>
    <div class="thumbnail">             <!--サムネイル-->
      <img class="thumbnail-image" src="">
    </div>

    
    <p class="preamble">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス</p>
    
    <div class="block1">     <!--phpで実装する  名前を後で考える とりあえず方法１みたいな部分のこと-->
                        
    <div class="block1-middleHeading">
       <h2 class="h2-block1">1. テキストテキストテキスト</h2> 
    </div>
    <div class="block1-contents">
        tekisutt
    </div>
    </div>
   </div>
</section>



<!--サイドバー-->
<div class="sidebar">
  <div class="sidebar-wrapper">
　　
　　
　　<div class="sidebar-search">        <!--サイドバーのサイト内検索-->
       <input class="sidebar-search-form" type="text">
       <button class="sidebar-search-button" type="submit" placeholder="discover"><i class="fas fa-search"></i></button>
   </div>

    <div class="sidebar-category">      <!--サイドバーのカテゴリー-->
      
      <h4 class="sidebar-category-head">カテゴリ</h4>
      
      <ul class="sidebar-category-listwrapper">

         <li class="sidebar-category-sectionWrapper engineering">
           <a class="sidebar-category-listHead">理・数・工学</a>
           <ul class="sidebar-category-children">
             <li class="sidebar-category-children-list"><a>coming soon!</a></li>
             <li class="sidebar-category-children-list"><a>coming soon!</a></li>
             <li class="sidebar-category-children-list"><a>coming soon!</a></li>
           </ul>
         </li>

         <li class="sidebar-category-sectionWrapper thesis">
           <a class="sidebar-category-listHead">論文</a>
           <ul class="sidebar-category-children">
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
           </ul>
         </li>

         <li class="sidebar-category-sectionWrapper reccomendintro">
           <a class="sidebar-category-listHead">おすすめ紹介</a>
           <ul class="sidebar-category-children">
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
           </ul>
         </li>

         <li class="sidebar-category-sectionWrapper zakki">
           <a class="sidebar-category-listHead">その他もろもろ</a>
           <ul class="sidebar-category-children">
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
            <li class="sidebar-category-children-list"><a>coming soon!</a></li>
           </ul>
         </li>

      </ul>
    </div>

    <div class="myinfo">                <!--自分のプロフィール-->

      <div class="myinfo-headWrapper">
        <div class="dot">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <h4 class="myinfo-head">プロフィール</h4>
      </div>

      <div class="myinfo-contents">
        <div class="myimage"></div>
        <div class="profileandName">
          <p class="textAboutName">ヒロ</p>
          <p class="text-myprofile">*******************</p>
        </div>
      </div>

      <ul class="sidebar-mysns">
        <li class="sidebar-mysns-wrapper">
          <i class="fab fa-instagram"></i>
          <p class="snsName">instagram</p>
        </li>
        <li class="sidebar-mysns-wrapper">
          <i class="fab fa-twitter"></i>
          <p class="snsName">twitter</p>
        </li>
        <li class="sidebar-mysns-wrapper">
          <i class="fas fa-mail-bulk"></i>
          <p class="snsName">contact</p>
        </li>
      </ul>

    </div>          


    <div class="sidebar-recommend">     <!--サイドバーのおすすめ記事-->
       <div class="sidebar-recommend-wrapper">

          <h4 class="sidebar-recommend-head">おすすめ記事</h4>

          <div class="sidebar-recommend-box1">
            <span class="ribbon15">1</span>
            <div class="sidebar-recommend-box1-image-wrapper">
              <img class="sidebar-recommend-box1-image" src="https://saruwakakun.com/wp-content/uploads/2017/11/fafdadfa.jpg">
            </div>
            <p class="sidebar-recommend-box1-title">テキストテキストテキスト</p>
          </div>

          <div class="sidebar-recommend-box1">
            <span class="ribbon15">1</span>
            <div class="sidebar-recommend-box1-image-wrapper">
            <img class="sidebar-recommend-box1-image" src="yui.png">
            <p class="sidebar-recommend-box1-title"テキストテキストテキスト</p>
            </div>
          </div>
       </div>
    </div>


    <div class="advatise"></div>        <!--広告-->




  </div>
</div>

</div>

</body>
</html>

body {
    background-color: rgb(247, 246, 242);
    text-align: center;
    background-image: url("theses.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    
} 

h1 {
    font-size: 65px;
    font-family: 'Shippori Mincho', serif;
    font-style: normal;
    font-weight:600;
    margin: 0;
}

h2 {
    font-size: 40px;
    border-bottom: solid #3c3e4075 3px;
    
}

ul{
    list-style: none;
}

input{
    margin:0;
}

form {
    padding:0;
}

.fab {
    margin-right: 10px;
}



.headerTitle-wrapper {
    margin-top:30px;
    margin-left: 30px;
    margin-right: 30px;
    padding-bottom:5px ;
    border-bottom: black solid 1px;
}

.title-p {
    background-color: black;
    color: white;
    margin:10px auto 0 ;
    
}

.preamble {
    position: relative;
    padding: 1.5rem 2.5rem;
    border: 2px dotted #000;
  }
  
.main {
    margin: 0 auto;
    max-width: 1000px;
}
.contents-wrapper {        /* ここから本編 */
    width:85%;  
    margin: 0 auto;
}

.thumbnail {
   width:100%;
   height: 300px;
   text-align: center;
   background-color: grey;
}

.thumbnail-image {
     width:100%;
     height: auto;
}



.h2-block1 {
        margin-top:50px;    
        padding: 0.25em 0.5em;/*上下 左右の余白*/
        color: rgb(247, 246, 242);/*文字色*/
        background: rgb(27, 27, 27);/*背景透明に*/
        border-left: solid 8px #2d94f5;/*左線*/
        font-size: 30px;
        text-align: left;
        
}

.block1-contents {
        height: 400px;
}


/**********************************サイドバー****************************************/
  
@media(min-width:990px){
  .main {
      display: flex;
  }
}

@media(max-width:990px){
.sidebar {
  display: none;
}
}

.sidebar {
    background-color:transparent;
    width: 290px;
    height: 2000px;
  }
  
  /****サイドバーのサイト内検索*******/
  .sidebar-search {
      display: flex;
      margin:30px 0;
      border: solid 1px black;  
  }

  .sidebar-search-form {
    margin: 0;
    border: none;
    padding: 10px 13px;  
    width:80%;
    height: 45px;
    line-height: 23px;
    font-size: 14px;
  }
  

  .sidebar-search-button {
      margin: 0;
      background-color: black;
      border:none;
    }
  .sidebar-search-button i {
      color: rgb(199, 201, 196);
      font-size: 30px;
  }

  /**********サイドバーのカテゴリ************/
.sidebar-category {    
    background-color: transparent;
    border:solid 1px black;
}


.sidebar-category-head {
    margin:0;
    padding: 7px 15px;
    font-size: 17px;
    font-weight: 700;
    background-color: black;
    color: cornsilk;
}

.sidebar-category-sectionWrapper {
  padding: 7px 0;
}

.sidebar-category-listwrapper {
      padding:7px 15px;
      margin: 0;
      font-size: 20px;
      border-bottom:solid 1px black ;
      text-align: left;
  }

  .sidebar-category-listHead {    /*リスト見出し*/
    color: black;
    font-weight: 900;
  }

  .sidebar-category-children {   /*リスト詳細*/
     color: #8a8a8a;
     font-weight: 400;
  }

退会済みユーザー

2021/04/05 16:10

自分だけかもしれませんが、どこの余白が無駄なのかがわかりませんでした。画像のどこの部分の余白なのか、ペイント等のアプリを使って、教えて頂けないでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

.sidebar 内の画像がはみ出しているようです。

以下のようにするとどうでしょうか。

css
1.sidebar img {
2    width: 100%;
3}

投稿2021/04/06 00:56

編集2021/04/06 00:58

Lhankor_Mhy

総合スコア36115

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！