为什么我的导航栏会影响图像的居中？

Question

如果我没有导航栏，那么我的图像就会很好。

如果我然后添加导航栏（使用无序列表水平列表），那么我的图像会更多地对齐页面左侧。

它只是一个基本布局

$maxDesc;
function equalize(){
    $('.owl_diary_desc').each(function(i){
        if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
    });

    $('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}

以下是完整的代码（它不是很多，但在此处发布仍然太多了） https://jsfiddle.net/ps84wbx0/

很遗憾，我无法添加图片，但我确定任何图片的大小写都相同。

这是我要创建的页面

这是一个片段：

＆＃13;

＆＃13;

<div>
<img ...>
<ul>....</ul>
</div>

＆＃13;

/* Logo Styling */
div.homepage {
    position: fixed;
    left: 50%;
}

img.homepage {
    position: relative;
    left: -50%;
}


/*Nav Bar Styling*/
ul {
    list-style-type: none;
    margin-left: -50%;
}

li.button {
    display: inline-block;
    margin: 0 1em 1em 0;
    padding: 0 4em;
    font: 300 1.5em/3em 'Open Sans', sans-serif;
    letter-spacing: .08em;
    color: #fff;
    background: #0090C0;
    border-radius: 2px; 
}

li.button:hover{
    background: #007DA7;
    box-shadow: 0 0 3px rgba(black, .5) inset;
}
 
a:link, a:hover, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

有多种方法可以解决这个问题，但我认为这是最简单的方法之一。我只更改了div.homepage，img.homepage和ul的CSS。这是代码：

＆＃13;

＆＃13;

/* Logo Styling */
div.homepage {
    position: fixed;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
}

img.homepage {
    position: relative;
}


/*Nav Bar Styling*/
ul {
    list-style-type: none;
}

li.button {
    display: inline-block;
    margin: 0 1em 1em 0;
    padding: 0 4em;
    font: 300 1.5em/3em 'Open Sans', sans-serif;
    letter-spacing: .08em;
    color: #fff;
    background: #0090C0;
    border-radius: 2px; 
}

li.button:hover{
    background: #007DA7;
    box-shadow: 0 0 3px rgba(black, .5) inset;
}
 
a:link, a:hover, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

＆＃13;

<div class="homepage">
    <img src="images/homepage.png" class="homepage">
    <ul>
        <li class="button"><a href="index.html" data-text="Home">Home</a></li>
        <li class="button"><a href="about.html" data-text="About">About</a></li>
        <li class="button"><a href="services.html" data-text="Services">Services</a></li>
        <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;