I have an unordered linked list. I’m trying to shift one of the items in the navigation all the way to the right (Order) as if it had text-align: right;. I tried using float: right; and text-align: right;, but none of them seemed to work. If I set the margin-left to a really high number (such as 100px) it does shift to the right, but if I resize my window then I can’t see it anymore or it’s not on the right side of the page. Here is the HTML:

nav {
  position: fixed;
}

.navigation-links-no-style a {
  text-decoration: none;
  position: relative;
  margin: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

.navigation-links li {
  padding-top: 1.3em;
}

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: solid 1px black;
  background: white;
  padding-left: 5em;
}

.navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 20px;
  color: black;
  font-size: 14pt;
}

.order {
  color: #FFFFFF !important;
  background: #1419e2;
  text-decoration: none;
  padding: 8px;
  border-radius: 5px;
  margin-top: 15px;
}
<div class="navbar">
  <a class="glacier-hills" href="https://stackoverflow.com/questions/73103744/glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul class="navigation-links">
    <div class="navigation-links-no-style">
      <li>
        <a class="menu" href="menu.html">Menu</a>
      </li>
      <li>
        <a class="location" href="location.html">Hours and Location</a>
      </li>
    </div>
    <li>
      <a class="order" href="order.html">Order</a>
    </li>
  </ul>
</div>

Any help would be greatly appreciated. Thanks!

Assuming you’re looking to move your .order element, you’ll want to apply the float: right rule to the parent (<li>) element. I’ve added a class to this, .order-containerto make this easier to achieve in the following example.

Note also that once you float to the right, it will be off the screen by default. You’ll want to set a negative margin-right to circumvent this. I’ve gone with margin-right: -10em in the following, to match the offset from the image on the left.

Ultimately, you may wish to consider using a framework to achieve responsive design, ensuring that the offset is correct regardless of screen size.

nav {
  position: fixed;
}

.navigation-links-no-style a {
  text-decoration: none;
  position: relative;
  margin: 15px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

.navigation-links li {
  padding-top: 1.3em;
}

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: solid 1px black;
  background: white;
  padding-left: 5em;
}

.navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 20px;
  color: black;
  font-size: 14pt;
}

.order {
  color: #FFFFFF !important;
  background: #1419e2;
  text-decoration: none;
  padding: 8px;
  border-radius: 5px;
  margin-top: 15px;
  float: right;
}

.order-container {
  float: right;
  margin-right: 10em;
}
<div class="navbar">
  <a class="glacier-hills" href="https://stackoverflow.com/questions/73103744/glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul class="navigation-links">
    <div class="navigation-links-no-style">
      <li>
        <a class="menu" href="menu.html">Menu</a>
      </li>
      <li>
        <a class="location" href="location.html">Hours and Location</a>
      </li>
    </div>
    <li class="order-container">
      <a class="order" href="order.html">Order</a>
    </li>
  </ul>
</div>

MDN still advises that <div> is not a valid child of <ul>. . float adds a whole heap of side effects by removing the items from the natural flow of the document. To modernize this we can make use of display:flex

/*Normalise body*/
body {
  margin:0;
}

/*Set flex on the nabar top position logo and links*/
.navbar {
  display: flex;
}

/*Ad a maring to the logo link*/
.navbar > a:first-of-type {
  margin-left: 5em;
}

nav {
  position: fixed;
}

.navigation-links-no-style a {
  text-decoration: none;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  /*Ad flex to the nav link element*/
  display: flex;
  /*Vertically center the links*/
  align-items:center;
}

/*Push the last element right but give it a little margin to the right*/
.navbar ul>li:last-of-type {
  margin-left: auto;
  margin-right:1em;
}

.navigation-links li {
  padding-top: 1.3em;
}

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  border-bottom: solid 1px black;
  background: white;
}

.navbar a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin-left: 20px;
  color: black;
  font-size: 14pt;
}

.order {
  color: #FFFFFF !important;
  background: #1419e2;
  text-decoration: none;
  padding: 8px;
  border-radius: 5px;
  margin-top: 15px;
}
<div class="navbar">
  <a class="glacier-hills" href="https://stackoverflow.com/questions/73103744/glacier_hills.html">
    <img src="Images/Glacier-Hills-Logo.svg" alt="" width="182" height="90">
  </a>
  <ul class="navigation-links">
    <li>
      <a class="menu" href="menu.html">Menu</a>
    </li>
    <li>
      <a class="location" href="location.html">Hours and Location</a>
    </li>
    <li>
      <a class="order" href="order.html">Order</a>
    </li>
  </ul>
</div>

You should use media queries for making navbar responsive.

a {
  text-decoration: none;
  color: black;
}
.navbar {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px black;
}
.div-links {
  display: flex;
  align-items: center;
  width: 70%;
}
.nav-links {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.nav-links li {
  padding: 2rem;
}
.nav-items {
  width: 30%;
  display: flex;
  justify-content: space-around;
}

.order {
  overflow: hidden;

  color: #ffffff !important;
  background: #1419e2;
  text-decoration: none;
  padding: 0.8rem;
  border-radius: 5px;
}
<div class="navbar">
      <a href="https://stackoverflow.com/questions/73103744/glacier_hills.html">
        <img
          src="Images/Glacier-Hills-Logo.svg"
          alt=""
          width="182"
          height="90"
        />
      </a>
      <div class="div-links">
        <ul class="nav-links">
          <div class="nav-items">
            <li>
              <a class="menu" href="menu.html">Menu</a>
            </li>
            <li>
              <a class="location" href="location.html">Hours and Location</a>
            </li>
          </div>

          <li class="btn">
            <a class="order" href="order.html">Order</a>
          </li>
        </ul>
      </div>
    </div>

Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.