Position Nav Bar Top Right - html

Question

I am trying to move my Nav Bar to the Top Right with my logo on the Top Left all on one line. But I am unable to do so and I could use some help. I am new to learning HTML and CSS. The nav bar currently rests below the name/logo on the top right.
Demo
.container{
padding: 40px 40px 40px 40px;
margin: 10px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: left;
border: 1px solid blue;
color:white;
}
.container h1{
text-align: left;
font-size: 50px;
}
.container nav{
height: 70px;
line-height: 70px;
border: 1px solid green;
}
.container nav ul {
list-style: none;
width: 100%;
border: 1px solid red;
text-align:right
}
.container nav ul li {
display: inline-block;
font-size: 100%;
color:white;
margin-right: 0;
border : 1px solid yellow;
}
<div class="container">
<header>
<h1>Srikanth Gowda</h1>
</header>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>

Answer 1

One way would be to use float.
Per documentation found on MDN Web Docs
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
Learn more about float
Add the following to your CSS
.container header {
float: left;
}
Change your .container nav to:
.container nav{
height: 70px;
line-height: 70px;
border: 1px solid green;
float: right;
}
This will get you what you want...
Working demo

Answer 2

A couple of quick and dirty methods as starting points:
Method 1, using flexbox:
.container{
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
<div class="container">
<header>
<h1>Srikanth Gowda</h1>
</header>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
Method 2, using floats:
header {
float: left;
}
nav {
float: right;
}
nav ul {
list-style: none;
padding-top: 18px;
}
nav ul li {
display: inline-block;
margin-right: 5px;
}
<div class="container">
<header>
<h1>Srikanth Gowda</h1>
</header>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>

Answer 3

you can use flex box property. and float right and left to align your div
.container{
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
height:70px;
border: 1px solid blue;
color:blue;
}
.container h1{
font-size: 50px;
}
.container .navbar{
height: auto;
line-height: auto;
border: 1px solid green;
float:right;
}
.container .navbar ul {
list-style: none;
width: auto;
border: 1px solid red;
}
.container .navbar ul li {
display: inline;
font-size: 100%;
color:blue;
border : 1px solid yellow;
}
.header{
float:left;
}
.d1{
float:clear;
height:100px;
width:1000px;
}
<div class="container">
<div class="header">
<h4>Srikanth Gowda</h4>
</div>
<div class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
<div>
<div class="d1">
rest of your content
eferfer
</div></div>

Answer 4

When you want to align elements in a div on the same line but on different sides always use the float property. You can change the header's position to left and nav to right by using the float property as below:
.header{
float:left;
}
.container nav{
height: 70px;
line-height: 70px;
border: 1px solid green;
float: right;
}

Answer 5

There are two ways. the first one is given below.
.container header{
display:inline-block;
float:left;
}
.navbar{
display:inline-block;
float:right;
}
The second method is you can put them in a table like below.
<div class="container">
<table>
<tr>
<td>
<header>
<h1>Srikanth Gowda</h1>
</header>
</td>
<td>
<nav class="navbar">
<ul>
<li>Design</li>
<li>Photography</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</td>
</tr>
</table>
</div>