batharoy

Use the “Custom Menu” widget under Appearance > Widgets

Check the @media queries in the original css, depending on what and how you are creating a new css, they might be overwritten by what you modified.
By default the Responsive theme does what you want. The stacking effect is controlled by those @media queries.
The original css for this will be found in /THEME FOLDER/core/css/responsive.css

Download the zip file here.
Pull the php file from the zip and upload to the server.

inkness/css/skins/main.css stylesheet is being called after inkness/style.css, thereby overwriting the changes.

These are the default values, change as you want.

#site-navigation a:hover {
    border-bottom: #00bac4 solid 2px;
}

I did confirm no text or menu with safari 5.1 on windows, it is not just your machine.
I would recommend asking a friend with an apple computer to visit your site with safari and report what they see.
My prediction is the site will view fine because they have an updated browser.

https://codex.www.ads-software.com/Creating_a_Static_Front_Page

The latest version of Safari for Windows is almost 2 years old and no longer supported. I don’t think I would use it as your default browser as it doesn’t even receive security updates.

#logo > a > img {
    margin: 0;
}

what is your general approach on modifying theme?

We use child-themes for modification.

https://s11.postimg.org/ru9ftlaib/Untitled.png

You have something overwriting the 100% width, looks like custom css plugin or custom styling area in the theme.

Your image has inline sizing, this along with what @wolfs bRain suggested should overwrite it.

.header-image {
    max-width: 100% !important;
}

The error shown by your site hints that the “imbalance-child” theme is still active, have you deleted or renamed that folder?
Not being able to access the forum for support would be a huge red flag in my mind.

#masthead {
    background: url(https://i1.wp.com/theeverydayman.co.uk/wp-content/uploads/2014/02/1.png) no-repeat;  background-size: contain;
    background-position: top;
    height: 100px
}
.site-branding {
    float: none;
    text-align: center;
    margin-top: 20px
}
.site-title a{
    color: transparent;
}

@delmind
You are on the right track.
This is the code that outputs your tagline in the header.php.

<h2 class=”site-description”>
<?php bloginfo( ‘description’ ); ?>
</h2>

You could simply add a
tag and and your second tagline.

<h2 class="site-description">
    <?php bloginfo( 'description' ); ?><br />
SECOND TAGLINE HERE
</h2>