小さな画面でサイドバーが折りたたまれない

Question

私は、ヘッダーをコンテナのdiv全体と同じ幅に広げて1つの長いブロックにしたいと思います。私はBootstrap 4と古いパネルを置き換えた "カード"を使用しています。

残念ながら、私のヘッダーはそれを行うことができません。私はCSSで余白やパディングを操作しようとしましたが、それはうまくいきませんでした。あなたは、ヘッダーの縁の周りに白いスライバーがある画像を見ることができます。コンテナのdiv全体に白い枠線を付けると、他のコンテンツからオフセットされたままにしておきたいだけです。ヘッダー要素で覆いたいだけです。

便宜上、ヘッダー要素（h2）と内側にあるdivの周りに小さな境界線を配置しました。

#bio .container { 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
    padding-bottom: 4px; 
 
} 
 

 
.card-header {}

<div class="col-9 ml-2"> 
 
    <section id="bio"> 
 
    <!--bio section--> 
 
    <div class="container"> 
 
     <div class="card-header" style="border: 1px solid black"> 
 
     <h2 style="border: 1px solid green">Summary</h2> 
 
     </div> 
 
     <p class="card-text"> 
 
     I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding 
 
     to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student." 
 
     <br /> 
 
     <br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some 
 
     one concept in class, even in college. I frequently am recommended by parents to friends and family members. 
 
     </p> 
 
    </div> 
 
    </section>

Answer 1

あなた.card-ヘッダークラ​​スの周りのパディングのちょうどビットがありますように見えます。私はクラスの左と右のパディングを0に設定しました。ここにはCodePenがあり、これにはブートストラップ4が含まれていることが示されています。

私がポイントを完全に逃したかどうかは教えてください。

#bio .container { 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
    padding-bottom: 4px; 
 
} 
 

 
.card-header { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
}

<div class="col-9 ml-2"> 
 
    <section id="bio"> 
 
    <!--bio section--> 
 
    <div class="container"> 
 
     <div class="card-header" style="border: 1px solid black"> 
 
     <h2 style="border: 1px solid green">Summary</h2> 
 
     </div> 
 
     <p class="card-text"> 
 
     I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding 
 
     to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student." 
 
     <br /> 
 
     <br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some 
 
     one concept in class, even in college. I frequently am recommended by parents to friends and family members. 
 
     </p> 
 
    </div> 
 
    </section>

編集：このパディングはcard.scssに含ま.cardヘッダクラスによって引き起こされる