I am struggling to align the charts with the menu. Their heights are different than the menu on the left.
Menu div:
<nav>
<div class="menu-item alpha">
<h4><a href="index.aspx" style="color: #EDEDED">Home</a></h4>
<p>To Navigate to Home Page</p>
</div>
<div class="menu-item">
<h4><a href="#">KPIs</a></h4> <!-- colored bar -->
<ul> <!-- expanding white area -->
<li><a href="#">Churn Rate</a></li>
<li><a href="#">Dormont Users</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
</nav>
Table div:
<table border="1" align="right" >
<tr>
<th>Chart 1</th>
<th>Chart 2</th>
</tr>
<tr>
<td>
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1">
<Series>
<asp:Series Name="Series1" ChartType="Line" XValueMember="Activity" YValueMembers="NumberOfStudents" YValuesPerPoint="2"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [FavouriteActivities]"></asp:SqlDataSource>
</td>
<td>
<asp:Chart ID="Chart2" runat="server" DataSourceID="SqlDataSource1">
<Series>
<asp:Series Name="Series1" ChartType="FastPoint" XValueMember="Activity" YValueMembers="NumberOfStudents" YValuesPerPoint="2"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</td>
</tr>
</table>
This is the current situation:
This is the desired layout:
Please assist me with this issue.