/*CSS RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {margin:0; padding:0;
border:0; outline:0; font-size:100%; vertical-align:baseline;
background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote,
q{quotes:none;} blockquote:before, blockquote:after, q:before,
q:after{content:'';content:none;} :focus{outline:0;}
ins{text-decoration:none;} del{text-decoration:line-through;}
table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
body {
\t font-family:"Helvetica Neue",Helvetica, Arial;
\t background: #f9f9f9;
\t color: #555;
}
a{
\t text-decoration:none;
\t font-weight:bold;
\t color:white;
}
/*HEADER*/
.header {
\t background-color:#900000;
height:50px;
}
ul.main-nav li {
display:inline-block;
line-height:48px;
margin-left:20px;
}
nav ul a:hover{
\t \t background:#E6E6E6;
\t \t color:black;
padding:14px 0px 15px 0px;
}
.menu-icon-1{
display:none;
}
@media screen and (max-width:600px) {
ul.main-nav li:not(:last-child){
display:none;
}
.menu-icon-1{
display:block;
line-height:46px;
float:right;
}
a.menu-icon-1:hover {
\t line-height:18px;
}
}
.main-nav{
float:right;
}
<html>
<head>
<title>Bob the fixing guy</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/b0aacd6f67.js"></script>
</head>
<body>
<nav class="header">
<ul class="main-nav">
<li><a href="#" class="current">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Videos</a>
</li>
<li><a href="#">Pricing</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#" class="menu-icon-1">☰ menu</a>
</li>
</ul>
</nav>
<img src="images/bobtitle.jpg" class="header-image" width="100%">
<div class="content">
<p>The C&O fully absorbed the Pere Marquette Railway in 1947, inheriting the car ferry service already established in Ludington. The division became known as the "Pere Marquette District" of the C&O railroad. There were already several car ferries working
out of Ludington at the time, including the Pere Marquette 21 and Pere Marquette 22, the City of Saginaw 31 and City of Flint 32, and the City of Midland 41. C&O decided to improve its ferry fleet by adding two new ships. While similar in design
to the immensely popular City of Midland 41, the new ships would have several notable design changes, such as a full-width pilot house that gave the crew an almost 360-degree view, and new lifeboat davits that freed up deck space.</p>
<p>Hull 369, which would become the Spartan began construction in late 1950 by the Christy Corporation of Sturgeon Bay, Wisconsin. She was launched on 4 January 1952 without fanfare; the Badger was being built at the same time, and the owners preferred
a double-christening ceremony. During construction, many cities on both sides of Lake Michigan lobbied for their names to go on the new ships, as was the tradition with previous Pere Marquette car ferries (i.e. City of Midland 41). C&O decided that
fewer feelings would be hurt if the twin ferries were named Spartan and Badger, after the mascots of Michigan State University (then Michigan State College) and the University of Wisconsin. The ships were christened on 6 September 1952 after the
Badger was successfully launched. The Spartan completed her sea trials on 27 September 1952 and was delivered to C&O on 23 October. She immediately began work for the C&O, operating from her home port of Ludington.</p>
</div>
</body>
