How to make selected area's background grey - html

Question

I'm wanting to change the area marked in red to a grey color, I've tried a bunch of things but I'm stumped, any help would be greatly appreciated!
Essentially I'm wanting to make the background a light grey color but not change the top bar or the navigation.
Image
Here is the code:
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Thank you in advance for any help you can provide!

Answer 1

You need to to write or overwrite rules from bootsrap.
Create the selectors for each div you want to target .
example:
main,
main .panel ,
main .panel .panel-heading
/* and whatevere else you want to select */
{
background:grey;
}

Answer 2

What your are looking for is a background-color css property.
You can give him a color. Personaly i like #939393.
So you can try adding :
style="background-color:#93939; to your <main> tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2" style="background-color:#939393">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

Answer 3

Do you have a div containing them all?... I can see you are good at this, so I hope you tried to find the class name and set the background-color="someShadeOfgrey"... You can do this with the < style> tag or a CSS file :)... or just implement it with the < div> tag
<div class="myClass" style="background-color:grey;">