I've been attempting to shift the alignment of a table row that contains the navigation links for my website from left to right, but no matter what I try to modify, nothing seems to budge. I'm relatively new to studying HTML and CSS, so I would greatly appreciate any assistance.
HTML
<div id="nav">
<table>
<tr>
<td>
<a href="index.html">
<img src="Images/Home.png"/>
</a>
</td>
<td>
<a href="Learn.html">
<img src="Images/Learn.png"/>
</a>
</td>
<td>
<a href="Practice.html">
<img src="Images/Practice.png"/>
</a>
</td>
<td>
<a href="About.html">
<img src="Images/About.png"/>
</a>
</td>
<td align="right">
<a href="Donate.html">Donate</a>
</td>
</tr>
</table>
</div>
CSS
#nav {
width: 100%;
height: 10%;
float: right;
background-color: #47B531;
margin: 0px;
padding:0px;
white-space: nowrap;
}
#nav tr {
margin: 0px;
padding: 0px;
width: 100%;
}
#nav td {
font-size: 18px;
margin: 0px;
padding: 5px;
text-align: right;
margin: 0px;
}
#nav img {
width: 30px;
height: 30px;
display: inline;
padding: 5px;
margin: 0px;
}