一种方法是使用float。
根据MDN Web Docs上的文档

**float**CSS属性指定元素应放置沿着其容器的左侧或右侧，允许文本和内联元素环绕该元素。该元素将从网页的正常流中删除，但仍保留为流的一部分（与绝对定位相反）。

Learn more about float
将以下内容添加到CSS

.container header {
  float: left;
}

将您的.container nav更改为：

.container nav{
   height: 70px;
   line-height: 70px;
   border: 1px  solid green;
   float: right;
}

这会让你得到你想要的
Working demo

以下是几个快速和不常用的方法：

• • 方法1，使用弹性盒：**

.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>

• • 方法2，使用浮点：**

一个二个一个一个

你可以使用flex框属性.和浮动左右对齐你的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>

当你想对齐同一行但不同侧的div中的元素时，总是使用float属性。你可以使用float属性将标题的位置更改为左，将nav的位置更改为右，如下所示：

.header{   

        float:left;
    }

.container nav{
   height: 70px;
   line-height: 70px;
   border: 1px  solid green;
   float: right;

}

有两种方法。第一种方法如下。

.container header{
       display:inline-block;
       float:left;
    }

    .navbar{
       display:inline-block;
       float:right;
    }

第二种方法是你可以把它们放在一个表中，如下所示。

<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>