Cannot Get Text to go to the Top of Page

Question

I cannot get the text for navigation to display inline and in the grey bar at the top of the page. I am guessing there is some type of problem with my CSS. Before I had the text included with the class="box" and the formatting was working, but the buttons wouldn't work, so I created a new div class="new" so the buttons would work.

HTML:

<div class="box-contents">
    <img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>

<div class="box">
</div>
<div class="new">
    <nav>
        <ul>
            <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
            <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
            <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
        </ul>
    </nav>
</div>

CSS:

@charset "utf-8";
/* CSS Document */
body{
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.box {
    width: auto;
    height: 120px;
    background: grey;
    overflow: hidden;
    opacity: 0.85;
    position: relative;
    z-index: 3;
}
.box-contents {
    margin: auto;
    width: 100%;
    overflow: hidden;
    position: absolute;
    opacity: 1 !important;
    z-index: 4;
}
.new ul{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    letter-spacing: 2px;
    font-size: 2em;
    margin-top: 0;
    padding-top: 25px;
    float: right;
    margin-right: 100px;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
    z-index: 99;
}
a{
    text-decoration: none;
    color: inherit;
}
img{
  display: block;
  float: left;
  width: 150px;
  margin: 10px 2%;
}
.images{
    display: block;
    width: 800px;
    float: inherit;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
}

The picture below shows the formatting issues

Answer 1

The most appropriate approach is to contain your logo and navigation links within your <nav> element. Right now they're broken out into separate elements which will cause them to stack. Recently, flexbox has become the best solution for situations like this. You'll be flexing your nav container and the unordered list inside. The margin property on the ul has left set to auto, which will push the navigation items to the right.

I've removed all of the unnecessary elements since we really just need <nav>. Hopefully this helps. I've included only the relevant CSS to give you a better understanding of what is happening.

nav {
  display: flex;
  align-items: center;
  background-color: grey;
}

nav ul {
  display: flex;
  margin: 0 0 0 auto;
  list-style-type: none;
}

nav ul li {
  padding-right: 10px;
}

<nav>
    <img src="//placehold.it/150x50" alt="Stephen Crawford Photography Logo">
    <ul>
        <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
        <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
        <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
    </ul>
</nav>