Inheriting vertical height and alignment (inline-block)

I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation.

1 http://d.pr/i/6TgE+

why http://d.pr/i/UAZn+

*it's actually 9.

Here is the code snippet:

<header>
    <div class="container">
        <div class="grid">      
            <div class="grid__item one-half">
                <a href="index.html"  class="logo-site">
                    <img src="http://aurelieremia.be/img/logo-aurelie.svg" alt="logo-ar">
                </a>
            </div><!--

         --><div class="grid__item one-half">
                <nav>
                    <ul class="nav main-nav">
                        <li>
                            <a href="#" class='active'>work</a>
                            <a href="#">about</a>
                            <a href="#">process</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

and here is the accompanying CSS :

.container {
  max-width: 1140px;
  height: 40px;
  margin: 0 auto; }

header {
  background: #4f4348;
  height: 40px;
  position: relative; }

.logo-site {
  height: 82%;
  background: #938b88;
  display: inline-block; }
  .logo-site img {
    height: 28px;
    vertical-align: middle;
    display: inline-block;
    line-height: 40px; }

.main-nav a {
  font-size: 14px;
  text-transform: uppercase;
  color: #f5f3e2;
  line-height: 40px;
  margin-right: 10px;
  font-family: "Brandon Grotesque Medium"; }
  .main-nav a.active, .main-nav a:hover {
    background: #f5f3e2;
    color: #4f4348; }

If you are unfamiliar with inuit.css, here is a portion of the code used from this framework:

.grid{
    margin-left:-$base-spacing-unit;
    list-style:none;
    margin-bottom:0;
}
    .grid__item{
        display:inline-block;
        width:100%;
        padding-left:$base-spacing-unit;
        vertical-align:top;
        @if $global-border-box == false{
            @include vendor(box-sizing, border-box);
        }
one-half          { width:50%; }

The first grid__item does not take up the full height from its parent containers. Setting height properties did not work, so I had to enlarge my logo to make it function properly.

The second grid__item works but only because I added a line-height property to center it vertically. However, I want to add a border for the active state which is proving difficult due to the links taking up all the available height space. The challenge lies in centering the content.

What I am aiming for:

dream http://d.pr/i/6Ggm+

Link to fiddle

Please help me solve this problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

retrieving dynamic data from an HTML form to JavaScript

Currently, I am dynamically adding elements using JavaScript. The count is defined and increases by one. <span style="margin-left:10px;">File Type : <select name="select_type_'+count+'" > <option value="select">Select</optio ...

The property 'join' is undefined for null values

I've recently started learning AngularJS, but I'm having trouble figuring out what's causing issues in my code. Despite trying various approaches, the outcome is always incorrect. <!DOCTYPE html> <html lang="en" ng-app="myApp"> ...

The sixth character that is not in SGML format

I encountered a validation error while working on a website project Line 1, Column 1: non SGML character number 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.… In Firefox source viewer, certain lines are highlight ...

Tips on avoiding scrolling when toggling the mobile navigation bar:

While working on a website using HTML, CSS, and BS3, I have created a basic mobile navigation. However, I am facing an issue where I want to disable scrolling of the body when toggling the hamburger button. The problem arises when the menu is toggled on, ...

The Vue/Vuetify wrapper component does not automatically pass on the `hide-details` parameter to the input component

I recently crafted a custom wrapper for the v-select input using Vuetify. Along with custom properties, I utilized the v-bind="$props"attribute to inherit all props. Upon testing, I observed that while this method applies to most props, it doesn ...

Troubleshooting issues with jQuery background-position animation and CSS sprites functionality

Trying to add animation to my navigation links background using a Css sprite. Check out the picture here: $(document).ready(function(){ $('nav a') // Move the background on hover .mouseover(function(){ $(this).stop().animate({ba ...

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

What is the best approach to transform an HTML textarea value into JSON format?

Client .. inserting some content into a form <textarea name="data"></textarea> After typing the following data into the textarea: {title: 'Hello one!', author: 'someone'} {title: 'Hello two!', author: 'mygf ...

Looking for a way to make CSS text color for a:hover have higher priority than a:visited?

I'm having an issue with my CSS code that changes the background color when hovering over a link. The text color is white on a blue background during hover, but if there is no hover, it's blue with a white background. Additionally, once the link ...

Set a variable to a specific cell within a table

I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create ...

Deciphering HTML encoding for text fields

As I transition from the Microsoft stack, specifically WPF, to HTML5, I apologize for any beginner-level questions. Today's topic is HTML encoding and decoding. Imagine an HTML5 application making AJAX calls to a C# backend using HTTP. The server al ...

Customizing animations for birds

I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...

I am experiencing an issue where my ajax code is unable to display the

After spending countless hours trying to make this work, I find myself stuck. I've set up a simple guestbook page and have created this code to generate a JSON file: <?php /* Constants for database settings */ define("DBHOST", "localhost"); defin ...

Issue with the alignment of DIV container due to spacing issues

In the screenshot below, there is a DIV container with padding of 15px on the left and right. However, the contents are appearing spaced out downwards for some reason... Other than the left & right padding, no other styling seems to be affecting it. Adjus ...

Attempting to transfer a string variable into a JavaScript scope within an HTML document using handlebars-express

Struggling to pass a variable from server-side to client-side using handlebars-express... After searching through the content here for some time, I realize I might need some help. I've confirmed that the object passed is indeed of string type, but h ...

The performance of dom-repeat may be impacted when dealing with sizable objects, such as those containing base64 encoded images

Currently, I am encountering an issue while generating a dom-repeat using a list of objects. Each object in the list has an imgUrl key containing a large base64 encoded image. However, when I generate the dom-repeat in this manner, each item appears undef ...

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

Connecting JavaScript and HTML in EclipseWould you like to know how to link

After completing the Rock Paper Scissors exercise on Codecademy, I wanted to transfer it to my Eclipse IDE. The code worked perfectly on the Codecademy platform, so I copied everything and created a .js workspace in Eclipse to paste it there. Now, my ques ...

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...