共享的样式表存在导航尺寸在不同视图中明显改变但在开发人员工具（chrome）中显示相同大小的问题

Question

I'm not too sure if my title conveyed the message well enough. Basically, I am designing a portfolio website. I am using SCSS and have virtually the same html across pages for the navigation and footer. The issue is when I change from say the Home view to the about me view, there is a noticeable difference in the size of the navigation link font size and by proxy the ul height. It is also obvious due to the extra space that shows up under the navigation icon. However, when I look at the DOM styles in the developer tools (as stated above, I am mostly using chrome for the beginning design phase), it shows that regardless of the view, the sizes are the same. I hope that makes sense, and please let me know if additional information is needed to figure this out.

 nav { background: #00334f; /* Old browsers */ } nav div.page-icon { text-align: center; } nav div.page-icon img { width: 60%; height: 60%; } nav .nav-header-links { list-style: none; } nav .nav-header-links li { display: inline-block; position: relative; } nav .nav-header-links li a { display: inline-block; text-decoration: none; padding: 3rem; color: white; font-weight: bold; font-family: "Orbitron", sans-serif; } nav .nav-header-links li a:hover { background: #b38f00; color: black; } nav .nav-header-links li div { transition: all 1s ease-in; } nav .nav-header-links li:hover div { display: block; } nav .nav-bottom-triangle { position: absolute; left: 15%; border-top: solid 20px #b38f00; border-right: solid 20px transparent; border-left: solid 20px transparent; display: none; } nav div.social-icons { height: 100%; } nav div.social-icons .social-icons-list { list-style: none; text-align: right; padding-right: 2rem; } nav div.social-icons .social-icons-list li { display: inline-block; width: 10%; padding-top: 1rem; padding-bottom: 1rem; text-align: center; position: relative; } nav div.social-icons .social-icons-list li a { display: inline-block; vertical-align: middle; border-left: solid 2px white; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a img { width: 70%; height: 70%; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a:hover { background: rgba(0, 0, 0, 0.3); border-radius: 50%; } nav div.social-icons .social-icons-list li a:hover img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 

 <nav class="row"> <div class="page-icon col-1"> <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/> </div> <ul class="nav-header-links col-7"> <li><a href="">Home</a><div class="nav-bottom-triangle"></div></li> <li><a href="aboutMe.html">About Me</a><div class="nav-bottom-triangle"></div></li> <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li> <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li> </ul> <div class="social-icons col-4"> <ul class="social-icons-list"> <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li> <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li> <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li> <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li> </ul> </div> </nav> 

Here is the about me html:

 nav { float: none; background: #00334f; /* Old browsers */ line-height: 150%; } nav div.page-icon { text-align: center; } nav div.page-icon img { width: 53%; height: 53%; } nav .nav-header-links { list-style: none; } nav .nav-header-links li { display: inline-block; position: relative; } nav .nav-header-links li a { display: inline-block; text-decoration: none; padding: 2.5em; color: white; font-weight: bold; font-family: "Orbitron", sans-serif; } nav .nav-header-links li a:hover { background: #b38f00; color: black; } nav .nav-header-links li div { transition: all 1s ease-in; } nav .nav-header-links li:hover div { display: block; } nav .nav-bottom-triangle { position: absolute; left: 15%; border-top: solid 20px #b38f00; border-right: solid 20px transparent; border-left: solid 20px transparent; display: none; } nav div.social-icons { height: 100%; } nav div.social-icons .social-icons-list { list-style: none; text-align: right; padding-right: 2em; } nav div.social-icons .social-icons-list li { display: inline-block; width: 10%; padding-top: 1rem; padding-bottom: 1rem; text-align: center; position: relative; } nav div.social-icons .social-icons-list li a { display: inline-block; vertical-align: middle; border-left: solid 2px white; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a img { width: 70%; height: 70%; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a:hover { background: rgba(0, 0, 0, 0.3); border-radius: 50%; } nav div.social-icons .social-icons-list li a:hover img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 

 <body> <nav class="row"> <div class="page-icon col-1"> <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/> </div> <ul class="nav-header-links col-7"> <li><a href="index.html">Home</a><div class="nav-bottom-triangle"></div></li> <li><a href="">About Me</a><div class="nav-bottom-triangle"></div></li> <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li> <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li> </ul> <div class="social-icons col-4"> <ul class="social-icons-list"> <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li> <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li> <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li> <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li> </ul> </div> </nav> </body> 

Hopefully you can tell, the html is exactly the same and they are both using the same stylesheet. I cant figure out what this is. PLEASE HELP!

Answer 1

Your original post doesn't seem to have any changes-- those discrepancies I called out are still present. I just edited them in my answer here to be normalized at 53% width/height and 3em of padding and also noted an extra line setting the nav line height at 150% in your first snippet. I commented that out and now they are identical.

Honestly, I am not sure why you are trying to maintain two different sets of nearly identical SCSS for these pages if the html is supposed to be the same-- you might make your life easier by leveraging a single generated stylesheet from sass for all pages that will act as the treatment for all navs, keeping it common across the site.

 nav { background: #00334f; /* Old browsers */ } nav div.page-icon { text-align: center; } nav div.page-icon img { width: 53%; height:53%; } nav .nav-header-links { list-style: none; } nav .nav-header-links li { display: inline-block; position: relative; } nav .nav-header-links li a { display: inline-block; text-decoration: none; padding: 3em; color: white; font-weight: bold; font-family: "Orbitron", sans-serif; } nav .nav-header-links li a:hover { background: #b38f00; color: black; } nav .nav-header-links li div { transition: all 1s ease-in; } nav .nav-header-links li:hover div { display: block; } nav .nav-bottom-triangle { position: absolute; left: 15%; border-top: solid 20px #b38f00; border-right: solid 20px transparent; border-left: solid 20px transparent; display: none; } nav div.social-icons { height: 100%; } nav div.social-icons .social-icons-list { list-style: none; text-align: right; padding-right: 2rem; } nav div.social-icons .social-icons-list li { display: inline-block; width: 10%; padding-top: 1rem; padding-bottom: 1rem; text-align: center; position: relative; } nav div.social-icons .social-icons-list li a { display: inline-block; vertical-align: middle; border-left: solid 2px white; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a img { width: 70%; height: 70%; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a:hover { background: rgba(0, 0, 0, 0.3); border-radius: 50%; } nav div.social-icons .social-icons-list li a:hover img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 

 <nav class="row"> <div class="page-icon col-1"> <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/> </div> <ul class="nav-header-links col-7"> <li><a href="">Home</a><div class="nav-bottom-triangle"></div></li> <li><a href="aboutMe.html">About Me</a><div class="nav-bottom-triangle"></div></li> <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li> <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li> </ul> <div class="social-icons col-4"> <ul class="social-icons-list"> <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li> <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li> <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li> <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li> </ul> </div> </nav> 

 nav { float: none; background: #00334f; /* Old browsers */ /*line-height: 150%;*/ } nav div.page-icon { text-align: center; } nav div.page-icon img { width: 53%; height: 53%; } nav .nav-header-links { list-style: none; } nav .nav-header-links li { display: inline-block; position: relative; } nav .nav-header-links li a { display: inline-block; text-decoration: none; padding: 3em; color: white; font-weight: bold; font-family: "Orbitron", sans-serif; } nav .nav-header-links li a:hover { background: #b38f00; color: black; } nav .nav-header-links li div { transition: all 1s ease-in; } nav .nav-header-links li:hover div { display: block; } nav .nav-bottom-triangle { position: absolute; left: 15%; border-top: solid 20px #b38f00; border-right: solid 20px transparent; border-left: solid 20px transparent; display: none; } nav div.social-icons { height: 100%; } nav div.social-icons .social-icons-list { list-style: none; text-align: right; padding-right: 2em; } nav div.social-icons .social-icons-list li { display: inline-block; width: 10%; padding-top: 1rem; padding-bottom: 1rem; text-align: center; position: relative; } nav div.social-icons .social-icons-list li a { display: inline-block; vertical-align: middle; border-left: solid 2px white; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a img { width: 70%; height: 70%; transition: all 1s ease-in-out; } nav div.social-icons .social-icons-list li a:hover { background: rgba(0, 0, 0, 0.3); border-radius: 50%; } nav div.social-icons .social-icons-list li a:hover img { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 

 <body> <nav class="row"> <div class="page-icon col-1"> <img src="design/images/Placeholder.png" alt="Devoneous Design Icon"/> </div> <ul class="nav-header-links col-7"> <li><a href="index.html">Home</a><div class="nav-bottom-triangle"></div></li> <li><a href="">About Me</a><div class="nav-bottom-triangle"></div></li> <li><a href="contactMe.html">Contact</a><div class="nav-bottom-triangle"></div></li> <li><a href="#">Portfolio</a><div class="nav-bottom-triangle"></div></li> </ul> <div class="social-icons col-4"> <ul class="social-icons-list"> <li><a href="#"><img src="design/images/Social/facebook.png" /></a></li> <li><a href="#"><img src="design/images/Social/twitter.png" /></a></li> <li><a href="#"><img src="design/images/Social/instagram.png" /></a></li> <li><a href="#"><img src="design/images/Social/linkedin.png" /></a></li> </ul> </div> </nav> </body>