HTML/CSS css boxes and positioning - html

Question

I have a CSS greybox: (When I say greybox, I mean the CSS box I have created that I have made with the color grey as you can see down below.)
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
This greybox is inside of my header and since this greybox is bigger than it appears, it goes past the header image but doesn't appear.
With this:
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
The picture and Mail Us show in the correct position not exposing the box. The test however, when I put it in exposes the box.
Here is the CSS I have behind this
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
margin-left: 500px;
}
You already saw the box for CSS.
I would like to accomplish either one of two things: Make the CSS box smaller and lower it, or have the CSS correctly position the test along with more elements to stay in the same line as the Mail Us.
NOTE: I have tried for the test margin-top:-pixels, this does not go up high enough and stops going up after a while.
This is what it looks like with the test:
This is what it looks like without the test:
As you can notice the first one has a larger box that drops down beneath the header picture. The one without the test has stayed in the header's picture.

Answer 1

There are a few problems with your code.
First, you should not nest anchors (<a>) in other anchor elements.
Using margin to position elements is not a good idea, you are already trying to use inline-block to change default block display of headers and at the same time you are floating one of your inline-block elements to the right.
Adding big margin to the element makes the element use more space and moves next inline element to the new line if it cannot fit in one line with other elements.
If you want to position all your menu items to the right you can use text- align:right on your inline-block elements to stick them to the right.
If you want your mail element be on the right you may stick to using float:right on it, but it would also be easier to just place mail element as the last one in the nav
You can nest anchors <a> inside headers <h1> to create links inside headers
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"></h1>
http://jsbin.com/kazocekoba/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to separate your navigation elements */
.navigation > * {
padding-left: 2em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- --><img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
A bit better solution http://jsbin.com/xunokaviju/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
/*float: right;*/
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to pad elements */
.navigation > * {
padding-left: 1em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- -->
<h1 id="nava">test</h1>
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"> </h1>
</nav>
</div>
</a>
</div>

Answer 2

In #mailtext the margin-left:1230 is the problem. Keeping your code just as it is the only change you'll have to make looks like this:
#mailtext
{
float: right;
font-size: 20px;
color: white;
font-style: italic;
}

Answer 3

change your
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
to
#mailtext
{
margin-top: 20px;
display: inline-block;
float:right;
font-size: 20px;
color: white;
font-style: italic;
}
Hope it solves your problem