I was rearranging the navigation bar to have an image on the left side and the links on the right, and I some how bugged up my navigation bar.
It's only on two pages that this bug occurs, so I thought maybe because I have different CSS files attached to them. I reviewed the code on both, there's nothing with margins or padding except for the body. The bar is also fixed
I tried [Gaps at the top and side of navigation bar buttons][1], but didn't help. I'm sorry ahead of time as it's a lot of code, I appreciate your time
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
.nav-wrapper {
width: 100%;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
margin-left: auto;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
margin: 0;
padding: 0;
display: flex;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
margin-left: 30px;
margin-right: 30px;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
left: 0;
right: 0;
text-transform: uppercase;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: space-evenly;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
font-size: 15px;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255, 255, 255, .8);
}
ul {
list-style: none;
padding: 0;
}
* {
text-align: center;
}
body {
margin-top: 150px;
color: #7a9ba6;
font-size: 20px;
}
a body {
color: #90949b;
font-size: 20px;
text-decoration: none;
}
h1 {
font-size: 25px;
color: #415b76;
}
.cyan {
color: cyan;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.magenta {
color: magenta;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.yellow {
color: yellow;
background-color: #233656;
border-radius: 5px;
padding: 3px;
}
.key {
color: black;
border-radius: 5px;
padding: 3px;
} <nav class="nav-wrapper">
<a href="index.html" style="margin-left: 75px; margin-top: 7px;">
<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" align="left" />
</a>
<ul class="nav">
<li class="item has-children"><a href="Printing.html">Printing</a>
<!-- <ul class="submenu">
<li>Labels & Stickers</li>
<li>Banners</li>
<li>A-Frame</li>
<li>Menu Boards</li>
<li>Takeout Menus</li>
<li>Business Cards</li>
<li>Dine-In Menus</li>
<li>Posters</li>
<li>Envelopes</li>
<li>Chinese Wedding Cards</li>
<li>Flyers</li>
<li>Letterheads</li>
<li>Brochures</li>
<li>Vinyl</li>
<li>NCR Forms</li>
<li>Catalogues</li>
</ul> -->
</li>
<li class="item has-children"><a href="Graphic Design.html">Graphic Design</a>
<!-- <ul class="submenu">
<li>Logo Design</li>
<li>Ads/Flyers/Promotions</li>
<li style="text-align: center;">Menu Boards<br>
(Digital & Boards)</li>
<li style="text-align: center;">Restaurant Menus<br>
(Takeout & Dine-In)</li>
</ul>-->
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
<li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
<li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
<li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
<li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
<li><a href="Calendars/Red Packet.html">Red Packet</a></li>
<li><a href="Calendars/More.html">More Calendars</a></li>
</ul>
</li>
<li class="item" style="color: #4D4D4D;">FAQS</li>
<li class="item"><a href="Contact Us.html">Contact Us</a></li>
</ul>
</nav>
<body>
<h1>What is offset printing?</h1>
Offset printing refer to lithography in general. Which produce the highest quality output of any printing process available today.<br> Because of the fragility nature of the printing plate used in lithography, the process is best suit for short to medium
run jobs.
<h1>What is PMS?</h1>
Pantone Matching System (PMS) is a standard set of color palette that was created to allow a way to describe a color.<br> For more information, see <a href="www.pantone.com" style="color: #4D4D4D;">www.pantone.com</a>.
<h1>What is process colors?</h1>
Process colors are <span class="cyan">Cyan</span>, <span class="magenta">Magenta</span>, <span class="yellow">Yellow</span> and <span class="key">Black</span>.<br> By overlapping dot patterns in those 4 colors, about 70% of all the visible colors can
be reproduce.
<h1>What is color matching?</h1>
Since every monitor, graphic card, printer have their own characteristic when displaying color, the colors may look very different in different system.<br> In order to counter those short coming, color matching software is used to calibrate input/output
devises like monitor, scanner, printer etc...<br> For more information, see <a href="www.datacolor.com" style="color: #4D4D4D;">www.datacolor.com</a>.
<h1>How to send graphic files?</h1>
We accept files in Press Quality PDF format (Hi-Res, CMYK).<br> Make sure you embed all fonts and graphics file you used with your document. A hardcopy print out would be very helpful. [1]: https://stackoverflow.com/questions/49276641/gaps-at-the-top-and-side-of-navigation-bar-buttons
