Can someone help me with styling my column in HTML? I'm trying to make the entire column grey, but only half of it is showing as grey. Here is what it currently looks like: Screenshot. I've attempted setting a background color for the column class but it didn't work. Any suggestions on how to fix this?
The section of HTML that needs fixing:
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 code where the issue might be arising from:
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;
}
...