Trying to move one part of my UL to the left [duplicate]

Question

I am using a simply UL as my navbar, and I am trying to separate the 1 item of the UL and put it to the left side of the page, and keep the other 3 centered, however i cant seem to get it working. I've tried wrapping it in a span and floating it, I've tried making a new UL but that just causes them to be on different lines.

I literally just want the homepage button to be aligned to the left and the rest of the buttons to be centered. Maybe I am missing something obvious.

ul {
    list-style-type: none;
    margin: 10px 0 0 0 ;
    padding: 0;
    text-align: center;
}

li {
    display: inline;
    padding: 0 15px;
}

a {
    color: black;
    text-decoration: none;
    font-size: 30px;
}

<div class="navbar">
<nav>
    <div>
        <ul>
            <li id="homepage"><a href="#">AG Designs</a></li>
            <li id="aboutmebutton"><a href="#">About Me</a></li>
            <li id="portfoliobutton"><a href="#">Portfolio</a></li>
            <li id="contactbutton"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Answer 1

This is one solution, making the first item absolute position

Add this to ur css

#homepage {
  position:absolute;
  left: 0;
}

Doing this, it will center the next 3 items to the center of the page, and push the homepage div to the left

Open the following snippet in full page view

ul {
  position:relative;
  list-style-type: none;
  margin: 10px 0 0 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline;
  padding: 0 15px;
}

a {
  color: black;
  text-decoration: none;
  font-size: 20px;
}

#homepage {
  position:absolute;
  left: 0;
}

<div class="navbar">
  <nav>
    <div>
      <ul>
        <li id="homepage"><a href="#">AG Designs</a></li>
        <li id="aboutmebutton"><a href="#">About Me</a></li>
        <li id="portfoliobutton"><a href="#">Portfolio</a></li>
        <li id="contactbutton"><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>

Answer 2

You can select the first child and float it to the left like so:

li:first-child {
  float: left;
}

EDIT: Added jQuery to achieve the desired result. It calculates the width of the first element and removes the left margin of the second li element.

Full code below:

var firstChildWidth = $( "#homepage" ).width();

$( "ul li:nth-child(2)" ).css( "margin-left", -firstChildWidth + "px" );

.navbar {
  background-color: yellow;
}

ul {
  list-style-type: none;
  margin: 10px 0 0 0 ;
  padding: 0;
  text-align: center;
}

li {
  display: inline;
  padding: 0 15px;
}

li:first-child {
  float: left;
  padding: 0px;
}

a {
  color: black;
  text-decoration: none;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <nav>
      <div>
          <ul>
              <li id="homepage"><a href="#">AG Designs</a></li>
              <li id="aboutmebutton"><a href="#">About Me</a></li>
              <li id="portfoliobutton"><a href="#">Portfolio</a></li>
              <li id="contactbutton"><a href="#">Contact</a></li>
          </ul>
      </div>
  </nav>
</div>

EDIT: Added some jQuery to achieve the desired result

Hope this helps.