HOW TO MOVE THE NAV BAR TO THE RIGHT?-CodePudding

I'm new to CSS and I'm trying to move my nav bar to the right side. I want to keep my navbar transpart. Only thing I need help with is the navbar placement. THANK YOU SO MUCH FOR THE HELP! I am new to coding Here is my code in html:

html,
body {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  font-family: verdana;
}

bg-img.JPG {
  width: 100%;
  height: 100vh;
  background-image: url(img2.jpg);
  background-size: cover;
}

.bg-img.JPG0 {
  /* The image used */
  background-image: url("img_nature.jpg");
  min-height: 380px;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Needed to position the navbar */
  position: relative;
}


/* Position the navbar container inside the image */

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}


/* The navbar */

.topnav {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  /* Navbar (aka.text) links */
  .topnav a {
    float: right;
    ;
    color: #fefefe;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .topnav a:hover {
    background-color: #fefefe;
    color: black;
  }

<div >
  <div >
    <div >
      <nav>
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        < <a href="#about">About</a>
      </nav>
    </div>
  </div>
  <img src="bg-img.JPG" alt="Snow" style="width:100%;">

</div>
<!--
This script places a badge on your repl's full-browser view back to your repl's cover page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green, teal, blue, blurple, magenta, pink!
-->
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>

any help will be greatly appreciated! Thank you so much!

CodePudding user response：

Try changing your container code to this:

.container {
  position: absolute;
  margin: 20px auto;
  width: 100vw;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
}

CodePudding user response：

Please see below. I've documented the changes in the source.

html,
body {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  font-family: verdana;
}

bg-img.JPG {
  width: 100%;
  height: 100vh;
  background-image: url(img2.jpg);
  background-size: cover;
}

.bg-img.JPG0 {
  /* The image used */
  background-image: url("img_nature.jpg");
  min-height: 380px;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Needed to position the navbar */
  /* position: relative; Removed */
}


/* Position the navbar container inside the image */

.container {
  /* position: absolute; Removed */
  margin: 20px;
  width: 100%; /* Changed */
  display: flex; /* Added */
}


/* The navbar */

.topnav {
  /* overflow: hidden; Remobed */
  background-color: rgba(255, 255, 255, 0);
  /* Navbar (aka.text) links */
  flex-grow: 1; /* Added */
}
.topnav a {
  /* float: right; Removed */
  /* color: #fefefe; Removed */
  /* text-align: center; Removed */
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #fefefe;
  color: black;
}

/* Added */
nav {
  text-align: right;
}

<div >
  <div >
  <!-- Move the image in front of the navbar -->
    <img src="bg-img.JPG" alt="Snow">
    <div >
      <nav>
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </nav>
    </div>
  </div>
</div>
<!--
This script places a badge on your repl's full-browser view back to your repl's cover page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green, teal, blue, blurple, magenta, pink!
-->
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>

CodePudding user response：

Here is the best example of your criteria you can check and do the implementation it's working perfectly, hope you understand the CSS itself.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_right