我正在尝试重新设计/更新我的网站主题以匹配我们的组织品牌指南。我还试图写一些元素，从长远来看，我们目前的工作方式让生活变得更轻松。我正在尝试使用w3school css在中间创建带有徽标的双导航。我似乎无法让一切都完全一致。请检查我的代码并告诉我要更改的内容。
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<style>
.hdr {
background-color: #022a3a;
}
ul.breadcrumb {
padding: 5px 8px;
list-style: none;
background-color: transparent;
display: inline-block;
}
ul.breadcrumb li {
display: inline;
font-size: 10px;
}
ul.breadcrumb li+li::before {
padding: 4px;
color: #fffef9;
content: "/\00a0";
}
ul.breadcrumb li a {
color: #fffef9;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: #e8b00f;
font-weight: 900;
text-decoration: underline;
}
ul.social {
padding: 5px 8px;
list-style: none;
background-color: transparent;
}
ul.social li {
color: #fffef9;
display: inline;
font-size: 14px;
}
ul.social li+li::before {
padding: 4px;
color: #fffef9;
/* content: "/\00a0"; */
}
ul.social li a {
color: #fffef9;
text-decoration: none;
}
ul.social li a:hover {
color: #e8b00f;
text-decoration: underline;
}
#logo {
float: left;
margin: 0 0 0 25px;
}
.sitelogo {
display: inline-block;
height: 78px;
width: 260px;
outline: none;
background: transparent url("http://www.navy.mil/imgs/americas-navy-globe.png") no-repeat 0 0;
cursor: pointer;
/* text-indent: -9000px; */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#___gcse_0 {
float: right;
width: 50%;
}
.gsc-control-cse {
width: 50%;
font-family: Arial, sans-serif;
border-color: #022a3a!important;
background-color: #022a3a!important;
}
.gsc-search-button-v2,
.gsc-search-button-v2:focus {
border-color: #C6CCD0!important;
background-color: #0076a9!important;
background-image: none;
filter: none;
}
.gsc-search-button-v2:hover {
border-color: #C6CCD0!important;
background-color: #e8b00f!important;
background-image: none;
filter: none;
}
</style>
<body>
<div class="hdr">
<div class="w3-content" style="max-width: 1200px;">
<div class="w3-row">
<div class="w3-col s9">
<!-- Start Sit Collection Breadcrumbs -->
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li><a href="#">Italy</a></li>
</ul>
<!-- End Sit Collection Breadcrumbs -->
</div>
<div class="w3-col s3">
<!-- Start Social Media Links -->
<ul class="social">
<li>Follow Us On:</li>
<li><a href="#" title="Follow Us On Facebook"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#" title="Follow Us On Twitter"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#" title="Follow Us On Flickr"><i class="fab fa-flickr"></i></a></li>
<li><a href="#" title="Follow Us On Wordpress"><i class="fab fa-wordpress"></i></a></li>
<li><a href="#" title="Follow Us On Youtube"><i class="fab fa-youtube-square"></i></a></li>
</ul>
<!-- End Social Media Links -->
</div>
</div>
<div class="w3-row">
<!-- Start Site Logo -->
<h1 id="logo">
<a class="sitelogo" href="#" title="Commander, Naval Surface Force, U.S. Pacific Home Page">
<span>Commander, Naval Surface Force, U.S. Pacific Home Page</span>
</a>
</h1>
<!-- Start Site Logo -->
<!-- Start Site Search Box -->
<div>
<script>
(function() {
var cx = '005604968521978876037:p1vcbb__lzm';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div id="___gcse_0">
<div class="gsc-control-cse gsc-control-cse-en">
<div class="gsc-control-wrapper-cse" dir="ltr">
<form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">
<table class="gsc-search-box" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gsc-input">
<div class="gsc-input-box " id="gsc-iw-id1">
<table style="width: 100%; padding: 0px;" id="gs_id50" class="gstl_50 " cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="gs_tti50" class="gsib_a"><input autocomplete="off" size="10" class="gsc-input" name="search" title="search" style="width: 100%; padding: 0px; border: medium none; margin: 0px; height: auto; outline: medium none; background: rgb(255, 255, 255) url("https://www.google.com/cse/static/images/1x/googlelogo_lightgrey_46x16dp.png") no-repeat scroll left center; text-indent: 48px;"
id="gsc-i-id1" dir="ltr" spellcheck="false" placeholder="Custom Search" type="text"></td>
<td class="gsib_b">
<div class="gsst_b" id="gs_st50" dir="ltr"><a class="gsst_a" href="javascript:void(0)" style="display: none;"><span class="gscb_a" id="gs_cb50">×</span></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td class="gsc-search-button"><button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13"><title>search</title><path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z"></path></svg></button></td>
<td class="gsc-clear-button">
<div class="gsc-clear-button" title="clear results"> </div>
</td>
</tr>
</tbody>
</table>
</form>
<div class="gsc-results-wrapper-overlay">
<div class="gsc-results-close-btn" tabindex="0"></div>
<div class="gsc-tabsAreaInvisible">
<div class="gsc-tabHeader gsc-inline-block gsc-tabhActive">Custom Search</div><span class="gs-spacer"> </span></div>
<div class="gsc-tabsAreaInvisible"></div>
<div class="gsc-above-wrapper-area-invisible">
<table class="gsc-above-wrapper-area-container" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gsc-result-info-container">
<div class="gsc-result-info-invisible"></div>
</td>
<td class="gsc-orderby-container">
<div class="gsc-orderby-invisible">
<div class="gsc-orderby-label gsc-inline-block">Sort by:</div>
<div class="gsc-option-menu-container gsc-inline-block">
<div class="gsc-selected-option-container gsc-inline-block">
<div class="gsc-selected-option">Relevance</div>
<div class="gsc-option-selector"></div>
</div>
<div class="gsc-option-menu-invisible">
<div class="gsc-option-menu-item gsc-option-menu-item-highlighted">
<div class="gsc-option">Relevance</div>
</div>
<div class="gsc-option-menu-item">
<div class="gsc-option">Date</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="gsc-adBlockInvisible"></div>
<div class="gsc-wrapper">
<div class="gsc-adBlockInvisible"></div>
<div class="gsc-resultsbox-invisible">
<div class="gsc-resultsRoot gsc-tabData gsc-tabdActive">
<table class="gsc-resultsHeader" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gsc-twiddleRegionCell">
<div class="gsc-twiddle">
<div class="gsc-title">Web</div>
</div>
<div class="gsc-stats"></div>
<div class="gsc-results-selector gsc-all-results-active">
<div class="gsc-result-selector gsc-one-result" title="show one result"> </div>
<div class="gsc-result-selector gsc-more-results" title="show more results"> </div>
<div class="gsc-result-selector gsc-all-results" title="show all results"> </div>
</div>
</td>
<td class="gsc-configLabelCell"></td>
</tr>
</tbody>
</table>
<div>
<div class="gsc-expansionArea"></div>
</div>
</div>
</div>
</div>
</div>
<div class="gsc-modal-background-image" tabindex="0"></div>
</div>
</div>
</div>
</div>
<!-- End Site Search Box -->
</div>
<div class="w3-row w3-gray" style="height: 38.5px;">
<div class="w3-col s5">
<!-- Start Global Navigation -->
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
<!-- End Global Navigation -->
</div>
<div class="w3-col s2">
<img src="https://www.public.navy.mil/surfor/crests/ashland_med.gif" width="50%" style="vertical-align: bottom!important;" />
</div>
<div class="w3-col s5">
<!-- Start Local Navigation -->
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
<!-- End Local Navigation -->
</div>
</div>
</div>
</div>
</body>
</html>