After working on an MVC project for over 6 months, I consistently faced a problem with HTML and CSS. The homepage always rendered correctly, as shown here: http://prntscr.com/tucp1
However, all other pages had strange white spaces between words, like in the example here: http://prntscr.com/tucui. Here is a snippet of the HTML code:
<div class="search right">
<div class="nav">
<ul>
<li><a>Nav1</a></li>
<li><a>Nav2</a></li>
<li><a>Nav3</a></li>
</ul>
</div>
This issue pointed me to part of my CSS code:
.nav ul li {
line-height: 27px;
display: inline;
float: left;
list-style-type: none;
.nav ul li a {
color: #424242;
padding: 0 10px;
font-weight: bold;
}
Upon closer inspection, I realized that I did not have 'float: left' applied to the 'li' elements. It took me testing on an inner page to easily discover this mistake. Can anyone provide insights on why only the homepage renders correctly while other pages have formatting issues?