How to properly implement a kerning generated code - php

Question

I have a situation trying to implement into the <header>, a logotext using kerning technique, with this simple but very handy tool made by Mr.Andrew (special thanks).
Before the modification, I had this <header> section in header.php:
...
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
using the generated kerning code, I was tried (and please correct me if it's a bad approach for php coding):
...
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="row max_width ">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<span class="logotext" style="letter-spacing: -18px;">n</span>
<span class="logotext" style="letter-spacing: -17px;">e</span>
<span class="logotext" style="letter-spacing: -18.5px;">u</span>
<span class="logotext" style="letter-spacing: -13px;">e</span>
<span class="logotext" style="letter-spacing: -23.5px;">g</span>
<span class="logotext" style="letter-spacing: -7px;">r</span>
<span class="logotext" style="letter-spacing: -19px;">i</span>
<span class="logotext">d</span>
<?php } ?>
</div>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="row max_width ">
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<span class="logotext" style="letter-spacing: -18px;">n</span>
<span class="logotext" style="letter-spacing: -17px;">e</span>
<span class="logotext" style="letter-spacing: -18.5px;">u</span>
<span class="logotext" style="letter-spacing: -13px;">e</span>
<span class="logotext" style="letter-spacing: -23.5px;">g</span>
<span class="logotext" style="letter-spacing: -7px;">r</span>
<span class="logotext" style="letter-spacing: -19px;">i</span>
<span class="logotext">d</span>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="row max_width ">
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</div>
</header>
<!-- End Header -->
...
Now, not so sure why, the result looks as it should in Chrome but in IE11/Firefox the letters are scrambled somehow in vertical position.
Any thoughts?
LE: with all due respect, I have to reconsider the answer validation because the sugestion doesn't help to have a solution properly implemented, It looks ok in Chrome but in IE/Firefox the Kerning values (the main subject of this question) it doesn't have any effect.
Hope you don't mind guys, but I still need an answer to close this question having the right solution for me and other people that will deal with this issue in the future. If I didn't understand right the implementation steps, it will be ok to have an answer more specific with real examples, I'm not lazy, just a pure noob (I already mentioned in my posts).Thanks.

Answer 1

The issue is that your .logo div is constrained to 33% width because it also has the .medium-4 class.
IE and Firefox are actually handling this correctly. For whatever reason, chrome is letting the content exceed the specified width of the container; this has something to do with the display attribute for .logo being set to table.
The solution is to remove the medium-4 (and small-7) classes and either use the correct scaffolding classes or define the width in your CSS.