I'm trying to get an entire column to show as grey however only half of it is grey and I dont know how to fix it. This is what It looks like. Ive tried to make class cloumn have a background color however that didnt work. And I'm kind of stuck on what to do now.
This is the main portion of the HTML that I want fixed.
HTML:
<div class = "row">
<div class = "column1">
<div class = "sidenav">
<h2 id = "CSUSMCourses">California State University of San Marcos Courses</h2>
<button id = "button"> First Year</button>
<button id = "button2"> Second Year</button>
<button id = "button3"> Third Year</button>
<button id = "button4"> Fourth Year</button>
<h2 id = "CommunityCollege">Community College Courses</h2>
<button id = "button5"> SaddleBack Community College</button>
<button id = "button6"> IVC Community College</button>
</div>
</div>
This is the CSS Portion. I dont know what I need to do to get the entire column to be grey.
CSS code:
body
{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header
{
padding-left:16px;
text-align: center;
}
.topnav
{
overflow: hidden;
background-color: #333;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover
{
background-color: #ddd;
color: black;
}
.topnav a.active
{
background-color: #1F51FF;
color: white;
}
.sidenav
{
overflow: hidden;
background-color: #333;
}
.sidenav button
{
background-color: #333; /* Green background */
border: 1px solid black; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 100%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
}
.sidenav button:not(:last-child)
{
border-bottom: none; /* Prevent double borders */
}
.sidenav button:hover
{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #1F51FF;
}
.column1
{
float: left;
width: 19%;
height: 100;
margin-right: 1%;
background-color: #333;
clear: both;
}
.column2
{
float: left;
width: 80%;
background-color: white;
}
#CSUSMCourses, #CommunityCollege
{
color: white;
}