html grid column size issue

[BetsyMinton]

I am having an issue with responsive columns. There is a gap between the columns that I cannot figure out how to remove. There isn't a page though when the boxes are stacked. I've tried setting the width of the column to 100% and auto. I've tried setting the margin to 0.  Any ideas? I've pasted my code below. 

<div>
    <div class="content-box">
        <div class="grid-row">
            <div class="col-sm-12 col-md-6" style="width: auto;">
                <div class="styleguide-section__grid-demo-element" style="border: 3px solid #8c8c8c; padding: 15px; height: 100%; width: auto; background-color: #f6e7fd; margin: 0px;">
                    <h2 style="text-align: center;"><span style="font-size: 24pt;">Topic</span></h2>
                    <hr />
                    <ul>
                        <li aria-level="1">What is/are the goal(s) for students? Describe the big ideas.</li>
                        <li aria-level="1">What genres or writing types are the focus?</li>
                    </ul>
                    <p>&nbsp;</p>
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <div class="styleguide-section__grid-demo-element" style="border: 3px solid #8c8c8c; padding: 15px; height: 100%; width: auto; background-color: #d6e7f5;">
                    <h2 style="text-align: center;"><span style="font-size: 24pt;">Text(s)</span></h2>
                    <hr />
                    <ul>
                        <li aria-level="1">What is the anchor text? How does it support the unit topic?</li>
                        <li aria-level="1">How do the ancillary texts support the topic(s) and goals for students?</li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-12 col-md-6" style="width: auto;">
                <div class="styleguide-section__grid-demo-element" style="border: 3px solid #8c8c8c; padding: 15px; height: 100%; width: auto; background-color: #ecf8f7;">
                    <h2 style="text-align: center;"><strong>Tasks/Assessments</strong></h2>
                    <hr />
                    <ul>
                        <li aria-level="1"><span>What/how will students be asked to demonstrate their understanding? Be specific. What tasks/text-dependent questions will be most important to spend time on?</span></li>
                        <li aria-level="1"><span>What student-released opportunities do you need to provide in the classroom? </span></li>
                    </ul>
                    <p>&nbsp;</p>
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <div class="styleguide-section__grid-demo-element" style="border: 3px solid #8c8c8c; padding: 15px; height: 100%; width: auto; background-color: #fdede7;">
                    <h2 style="text-align: center;"><strong>Standards/Targets/Goals</strong></h2>
                    <hr />
                    <ul>
                        <li aria-level="1"><span>What standards, content knowledge and skills will students need (look at each section of lessons)?</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div>
        <p>&nbsp;</p>
        <p><span>For more information, </span><a href="https://eleducation.org/resources/4-ts-curriculum-design-framework-and-criteria">visit the EL Education website</a><span>.&nbsp; </span></p>
    </div>
    <p>&nbsp;</p>
    <p style="text-align: right;">Select Next below to continue ⬇︎</p>
</div>

[JamesSekcienski · Accepted solution]

@BetsyMinton

The gap you are seeing is caused by a combination of the padding that is automatically applied based on the col-*-* classes and that your background color and border style are applied to a div within that.

To get rid of the gap, I would suggest applying the background color and border styles to the div elements with the col-*-* classes rather than the div within it. After you do this, you should also be able to remove the other styles you applied to the inner div with the class of "styleguide-section__grid-demo-element"