HTML CSS Navbar Spacing

Question 1

The problem is in display:inline-block - it reduces the elements to inline blocks, meaning they behave like all other inline content in HTML. Since there's whitespace between the anchor elements, which as always collapses to a single whitespace, what you see is an actual 'space' in between in the current font size just like between words in a sentence. You can fix this by applying font-size:0 on the container but that's messy since you'd have to reset it for the children. Recommended method is to just use float:left instead and manually set the parent's size correctly, and set the items to height:100%.

Using multiple elements with the same ID is wrong but not causing this issue - should still be fixed though.

Question 2

As I mentioned in my comment, IDs must be unique, so use classes instead. That being said, your links are inline elements and are sensitive to white space, so either float them left or remove the white space between the elements in the code.

Ex:

.navbar-item {
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    background-color: green;
    color: white;
    float:left;
}

jsFiddle example

White space removed jsFiddle example

Question 3

Try this;

.navbar-item {
  display:block;
  float:left;
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: green;
  color: white;
}

<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
<a href="home.html" class="navbar-item">Home</a>
<a href="lessons.html" class="navbar-item">Lessons</a>
<a href="aboutus.html" class="navbar-item">About Us</a>
<a href="donate.html" class="navbar-item">Donate</a>
</div>

Question 4

First,

#navbar-item {
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    background-color: green;
    color: white;
}

Change this to a class instead of an id. Id's are unique and can only be used once on a page but a class can be used over and over again.

I am pretty sure the space is from this but I will make a fiddle to test,

display: inline-block;

You could change display: inline-block; to float: left; and have it without the space.

JSFIDDLE

Question 5

Use float: left; instead of display: inline-block; by using inline-block will have 4px margin by default but using float: left; by default do not have the space. And use classes for every a element no id, id are unique and shouldn't be repeated.

.navbar-item {
     /*display: inline-block;*/
     float: left;
     width: 100px;
     height: 30px;
     text-align: center;
     background-color: green;
     color: white;
}

If you still want to use inline-block instead of float: left; you should use margin-left: -4px;

Question 6

To solve your problem quickly, you can wrap your links with span and give it a darker background:

<div id="navbar-core">
    <span class="navbar-inner-wrapper">
            <a href="home.html" id="navbar-item">Home</a>
            <a href="lessons.html" id="navbar-item">Lessons</a>
            <a href="aboutus.html" id="navbar-item">About Us</a>
            <a href="donate.html" id="navbar-item">Donate</a>
    </span>
</div>

Then add this to your CSS:

.navbar-inner-wrapper {
    background-color: green;
}