How to change the background color for Bootstrap's carousel plugin?

The problem you have at the moment is that the carousel has the container class applied and is, therefore, adding a fixed width to the element. The white you're seeing either side is actually the background colour of the body.

There are two ways around this (I've shortened the code for the example):

Full width

<!-- Remove the container class from the slides div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->

        <!-- Left and right controls -->

    </div>
</div>

Image width (shows grey background)

<!-- Wrap carousel-inner in a container div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->
        <div class="container"> <!-- Added this line -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;">
                </div>
            </div>
        </div> <!-- Added this line -->

        <!-- Left and right controls -->

    </div>
</div>

I've forked your codepen for an example: https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0