Question 43913 in Html Question posted in
Some basic documentation can be found here.

How do I get my Nav bar to be right aligned? – Html

I am fairly new to html and CSS. This is code for a homepage I am making for my front end web development course. I have been fiddling around with CSS and HTML to have my nav bar right aligned but it is centered above my heading. Any thoughts? I am struggling to find a solution to this issue. Thanks in advance for any help!

body {
  background-color: #b8d8b8;
  font-family: Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #4d7d4d;
  color: white;
  padding: 10px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

h1 {
  text-align: center;
  color: #4d7d4d;
  font-weight: bold;
}

.content {
  background-color: white;
  color: black;
  display: inline-block;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.content h2 {
  color: #4d7d4d;
  text-align: center;
}

.navbar {
  display: inline-block;
  background-color: #b8d8b8;
  text-align: right;
  padding: 10px;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border: 2px solid green;
  color: green;
}

.navbar a {
  color: green;
  text-decoration: none;
  margin-right: 10px;
}

footer {
  background-color: #4d7d4d;
  color: white;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Hauora Organic Fresh Pressed Juices</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About Us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Hauora Organic Fresh Pressed Juices</h1>
    <div class="content">
      <h2>Quality Organic Ingredients</h2>
      <p>At Hauora, we use only fresh, high-quality organic ingredients in our juices. We source our fruits and vegetables from local farms, ensuring their freshness and quality.</p>
      <p>Our commitment to organic ingredients supports local farmers and the environment.</p>
      <img src="quality_ingredients.jpg" alt="Quality Organic Ingredients">
    </div>
    <div class="content">
      <h2>Process and Freshness</h2>
      <p>At Hauora, we believe in freshness and use a state-of-the-art juicing process. Our juices are made to order, ensuring maximum freshness and flavor.</p>
      <p>We never use preservatives or pasteurization, so you can trust that our juices are pure and natural.</p>
      <img src="freshness_process.jpg" alt="Process and Freshness of our Juices">
    </div>
    <div class="content">
      <h2>Goals</h2>
      <p>At Hauora, our goal is to make healthy, organic juices accessible and affordable to everyone.</p>
      <p>We offer convenient online ordering and delivery options, and a variety of affordable juice options.</p>
      <img src="juice_goals.jpg" alt="Goals to Create a Healthy Juice Business">
    </div>
  </main>
</body>

</html>
Tags:

2

Answers


  1. 0

    To achieve what you want modify your code like this:

    body {
  background-color: #b8d8b8;
  font-family: Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #4d7d4d;
  color: white;
  padding: 10px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

h1 {
  text-align: center;
  color: #4d7d4d;
  font-weight: bold;
}

.content {
  background-color: white;
  color: black;
  display: inline-block;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.content h2 {
  color: #4d7d4d;
  text-align: center;
}

header {
  padding: 0 20px;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  color: green;
  text-decoration: none;
  margin-right: 10px;
}

footer {
  background-color: #4d7d4d;
  color: white;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./index.css" />
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css" />
  <title>Document</title>
</head>

<body>
  <header>
    <nav>
      <h1>Logo</h1>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About Us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Hauora Organic Fresh Pressed Juices</h1>
    <div class="content">
      <h2>Quality Organic Ingredients</h2>
      <p>
        At Hauora, we use only fresh, high-quality organic ingredients in our juices. We source our fruits and vegetables from local farms, ensuring their freshness and quality.
      </p>
      <p>
        Our commitment to organic ingredients supports local farmers and the environment.
      </p>
      <img src="quality_ingredients.jpg" alt="Quality Organic Ingredients" />
    </div>
    <div class="content">
      <h2>Process and Freshness</h2>
      <p>
        At Hauora, we believe in freshness and use a state-of-the-art juicing process. Our juices are made to order, ensuring maximum freshness and flavor.
      </p>
      <p>
        We never use preservatives or pasteurization, so you can trust that our juices are pure and natural.
      </p>
      <img src="freshness_process.jpg" alt="Process and Freshness of our Juices" />
    </div>
    <div class="content">
      <h2>Goals</h2>
      <p>
        At Hauora, our goal is to make healthy, organic juices accessible and affordable to everyone.
      </p>
      <p>
        We offer convenient online ordering and delivery options, and a variety of affordable juice options.
      </p>
      <img src="juice_goals.jpg" alt="Goals to Create a Healthy Juice Business" />
    </div>
  </main>

  <script></script>
</body>

</html>

    Here I use flex for nav so you can have your elements beside each other in ul again I use flex to have all the lis inline.

    Login or Signup to reply.
  2. 0

    You need to assign the .navbar class to nav element in your HTML and remove default list style type to achieve desired result

    <nav class="navbar">

    Add new style rule for list-style

    .navbar ul {
  list-style: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search