侧边栏在较小的屏幕上不会折叠

Question

I'd like my header to expand the same width as the entire div of the container so that it is one long block. I'm using Bootstrap 4 and the "cards" which replaced the old panels.

Unfortunately, my header isn't able to do that. I've tried manipulating the margins and padding in CSS, but that hasn't worked. You can see in the picture there is a sliver of white around the edges of the header. I want the white borders around the entire div of the container to keep it offset from other content, I just want the header element to cover it up.

For convenience, I've put a small border around the header element (h2) and the div which it sits inside.

 #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

It looks like there's just a bit of padding around your .card-header class. Below I set the left and right padding of the class to 0. Here's a CodePen to show it working with Bootstrap 4 included.

Feel free to let me know if I missed the point completely.

 #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> 

Edit: This padding is caused by the .card-header class included with card.scss