After implementing the CSS code provided below, my goal was to create a navigation bar that spans the entire width of the browser and features a striking red background. Additionally, I intended to position the logo on the furthest left side with text directly to its right. How can I achieve the desired effect of a #ff0000 navigation bar expanding across the full width of the browser? And how do I go about aligning the text to the right of the logo at the top of the browser window?
Review the CSS code snippet:
.logo{
float:left
}
.titletext {
text-align: right;
}
nav {
display: table;
width:100%;
background-color: #ff0000;
}
Here is the HTML markup:
<DOCCTYPE = HTML>
<html>
<head>
<div class="titletext">
<h2>Penguin NetOPS Solutions</h2>
<h3>IT Repair</h3>
</div>
<div class="logo">
<img src="http://www.logodesignlove.com/images/classic/penguin-logo.jpg" alt="Mountain View" style="width:200px;height:200px">
</div>
<nav>
<a href= "/~team_21/about_us.html">About Us</a> |
<a href= "/~team_21/cgi-bin/loan_calculator.cgi">Calculate Loan Payments</a>|
<a href= "/~team_21/cgi-bin/credit_check.cgi">Credit Check</a> |
<a href= "/~team_21/contact_us.html">Contact Us</a>|
<a href= "/~team_21/lottery.html">Special Offer</a>
</nav>
</head>
</html>