I too compared our versions now and realized the “contain” value for size was a poor choice. 
The tweaking was to just change the size value to em units. Image 31px x 27px, with 1em at default font-size is 16px, equals 2em x 1.75em:
.nav-tab-item:nth-child(1) a {
padding-left: 3em;
background-image: url("horizontal-nav-img.png");
background-position: .5em center;
background-repeat: no-repeat;
background-size: 2em 1.75em;
}
I’m not sure if this is still in the code or not (got my copy from the codepen), but I’d recommend removing position:fixed from .nav-tabs so it is returned to the natural flow of the page.
.nav-tabs {
list-style-type: none;
overflow: hidden;
background-color: #333;
padding: 0;
margin: 0;
}
AND
I’d recommend removing the massive margin-top from .textarea and maybe reducing the paragraph margins as desired.
.textarea {
/* margin-top: 50px; /* DELETE ME */
overflow:hidden; /* contain margins */
}
.textarea p {
margin:.25em 0; /* as desired */
}
I think this will be my final submission in this contest.
I revised the HTML (hopefully that is permissible) and of course the CSS.
When I write code for myself, I sometimes consolidate a few selectors so specific properties with the same value are assigned in one spot. I did that with the .5em padding assigned to .nav-tabs and span herein.
“Features:”
(1) The icon is a background image that is resized in proportion to the font-size. Its parent container is a <span> inside of an anchor w/{display:table-cell}.
(2) The space around the icon remains proportional as the font size changes.
(3) IF the text in one of the cells, such as “About Us”, happens to wrap, the height of all of the cells will increase; however, because the “Home” text and icon are inside a <span>, the size of the background-image (icon) will not change. Proportions are maintained.
(4) The current page is given a class of “active” (presumably by JS). The background-color of whichever tab is “active” turns green and the anchor is no longer clickable. Very simple.
(5) The CSS is commented.
(6) I assigned “active” to the “Services” tab just so you would be tempted to assign it back to the “Home” tab. 
I added a temporary magenta outline around the “Home” <span> so you can see how it works if the height of the row changes and changed the background-color of hovered non-active tabs so the hover behavior would be obvious.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/newbie-help-image-causing-problems-in-my-nav-menu/230449
MMAgeek
-->
<style type="text/css">
body {
padding:0;
margin:0;
}
.navbar {
background-color:#333;
}
.nav-tabs {
display:table;
padding:0;
margin:0;
}
.nav-tabs a {
display:table-cell;
vertical-align:middle;
text-align:center;
text-decoration:none;
color:white;
}
.nav-tabs a + a {
border-left:1px solid #ccc;
}
.nav-tabs a:not(:first-child),
.nav-tabs span {
padding:.5em; /* set padding inside anchors (table-cells) except first-child and inside span ("Home" item with icon) */
}
/* the span prevents the icon from growing inappropriately if other text wraps and the height of the row increases */
.nav-tabs a:first-child span {
display:block;
background-image:url("https://dl.dropboxusercontent.com/u/9770561/horizontal-nav-img.png");
background-repeat:no-repeat;
background-position:.5em center; /* distance of icon from left edge of menu */
background-size:auto 66%; /* relative size of icon */
padding-left:2.625em; /* distance of text from left edge of menu *//* icon to text space */
outline:1px dashed magenta; /* DEMO TEST OUTLINE. To Be DELETED */
}
.textarea p {
margin:.25em .5em;
}
.nav-tabs a:hover {
background-color:#a1a1a1;
}
.active {
background-color:#01760f;
pointer-events:none;
}
</style>
</head>
<body>
<nav class="navbar">
<nav class="nav-tabs">
<a href="#nogo"><span>Home</span></a>
<a class="active" href="#nogo">Services</a>
<a href="#nogo">About Us</a>
<a href="#nogo">Contact</a>
</nav>
</nav>
<div class="textarea">
<p>
Bushwick brunch etsy sartorial stumptown affogato. Tote bag health goth bespoke cornhole. Williamsburg pug occupy, +1 authentic post-ironic flannel tote bag swag trust fund venmo bushwick pinterest pitchfork. Selvage XOXO cliche irony, keytar flexitarian
vinyl microdosing listicle farm-to-table knausgaard heirloom vice vegan green juice. Sustainable literally green juice, williamsburg helvetica lo-fi distillery direct trade whatever celiac four loko fingerstache heirloom letterpress fashion axe.
Tattooed viral pitchfork, farm-to-table hella irony tumblr williamsburg chillwave PBR&B scenester echo park normcore. Retro 8-bit knausgaard wolf literally hashtag whatever man bun pinterest, portland authentic tote bag slow-carb freegan.
</p>
</div>
</body>
</html>
[OT]
Honestly, if it was, you’ve already won by far.
Thanks to all of you for the help. I have learned quite a bit from your replies!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.