页面最上面有一个定位栏，定位栏下面左侧是菜单，占据的位置小一点，右侧则是面积大一些的一块。怎么改可以把我的那个timetable那个div放到右边去。并且可以根据页面大小自动调整
问题：页面最上面有一个定位栏，定位栏下面左侧是菜单，占据的位置小一点，右侧则是面积大一些的一块。怎么改可以把我的那个timetable那个div放到右边去。并且可以根据页面大小自动调整。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/newtime.css">
<script src="js/jquery.js"></script>
</head>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">logo</a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Products</a>
</li>
<li>
<a href="#" class="nav-links">About Us</a>
</li>
<li>
<a href="#" class="nav-links">Contact Us</a>
</li>
<li>
<a href="#" class="nav-links">Blog</a>
</li>
</ul>
<a class="Register" href="Registeration.html"><button id="Re_btn">Register</button></a>
<a class="Logout" href="Login.html"><button id="Logout_btn">Log Out</button></a>
</nav>
<div class="container">
<div class="left">
<h2><span class="icon-user"></span>Normal Function</h2>
<ul style="display:block">
<li><a href="info.html" target="right"><span class="icon-caret-right"></span>Setting</a></li>
<li><a href="password.html" target="right"><span class="icon-caret-right"></span>Change Password</a></li>
<li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Course</a></li>
<li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a></li>
<li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a></li>
</ul>
</div>
</div>
</div>
<div class="right"></div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">2</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">3</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">4</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">5</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">6</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">7</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">8</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
CSS
body {
font-family: 'Josefin Sans', sans-serif;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.container{
displat:grid;
}
.left{
grid-colum:1;
}
.right{
grid-colum:2
}
/*-------------------------navrbar-------------------------*/
.navbar {
font-size: 18px;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
@media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
/*-------------------------navbar end-------------------------*/
.header{
grid-colum: span 12;
justify-content:space-between;
align-items:center;
padding:30px 10%;
}
.head-l {
position:relative;
float: right;
margin-right:15px;
margin-top: 15px;
margin-left: 15px;
}
.head-l .button {
padding: 8px 15px;
}
.head-l .bg-blue:hover {
background-color: #03b6fd;
}
.head-reg{
position:relative;
float: right;
margin-right:15px;
margin-top: 15px;
margin-left: 15px;
}
.head-reg.button{
padding: 8px 15px;
}
.leftnav {
width: 180px;
height: 100%;
position: fixed;
top: 70px;
left: 0px;
}
.leftnav-title {
height: 50px;
color: #FFF;
padding-left: 22px;
font-size: 14px;
line-height: 50px;
}
.leftnav-title span {
margin-right: 10px;
}
.leftnav h2 {
padding: 10px 0 10px 22px;
transition: all .1s ease-in-out;
display: block;
cursor: pointer;
font-weight: bold;
font-size: 14px;
border-top: 1px solid #b5cfd9;
}
.leftnav h2.on {
color: #09c;
}
.leftnav .border-bottom {
border-bottom: 1px solid #b5cfd9;
}
.leftnav h2 span {
margin-right: 10px;
}
.leftnav h2:hover {
color: #09c;
}
.leftnav ul {
display: none;
border-top: 1px solid #b5cfd9;
padding: 5px 0;
opacity: 1;
}
.leftnav ul li {
list-style-type: none;
}
.leftnav ul li a {
display: block;
padding-left: 30px;
line-height: 30px;
}
.leftnav ul li span {
margin-right: 8px;
}
.leftnav ul li a:hover, .leftnav ul li a.on {
color: #09c;
}
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.wrapper{
display:grid;
grid-template-colums:repeat(12,1fr);
grid-template-rows:100% 100% 100%;
}
#Re_btn{
font-family: Helvetica,Arial;
font-size: 13px!important;
height: 40px;
line-height: 18px!important;
padding: 3px 18px;
display: inline-block;
vertical-align: middle;
font-weight: normal;
border-radius: 10px;
margin: 0 8px 0 3px;
border: 1px solid #3383da;
color: #ffffff;
background-color: darkblue;
cursor: pointer;
}
#Logout_btn {
font-family: Helvetica, Arial;
font-size: 13px !important;
height: 40px;
line-height: 18px !important;
padding: 3px 18px;
display: inline-block;
vertical-align: middle;
font-weight: normal;
border-radius: 10px;
margin: 0 8px 0 3px;
border: 1px solid #3383da;
color: #ffffff;
background-color: #ff3140;
cursor: pointer;
}
}
大哥你真坑。我改了你的代码，回答的时候直接被禁言了，你代码里面有啥非法词组啊，？我给你改了，css代码贴不上去，被禁言了. css我只改了一部分，你看一下吧，我只把改了的css给你贴上来。
// css代码就改了这一点。
.container{
overflow: hidden;
}
.left{
float: left;
min-width: 140px;
width:30%;
}
.right{
float: left;
width: 70%;
}
.right table {
width: 100%;
height: 100%;
}
.right table td {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css.css">
<script src="js/jquery.js"></script>
</head>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">logo</a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Products</a>
</li>
<li>
<a href="#" class="nav-links">About Us</a>
</li>
<li>
<a href="#" class="nav-links">Contact Us</a>
</li>
<li>
<a href="#" class="nav-links">Blog</a>
</li>
</ul>
<a class="Register" href="Registeration.html"><button id="Re_btn">Register</button></a>
<a class="Logout" href="Login.html"><button id="Logout_btn">Log Out</button></a>
</nav>
<div class="container">
<div class="left">
<h2><span class="icon-user"></span>Normal Function</h2>
<ul style="display:block">
<li><a href="info.html" target="right"><span class="icon-caret-right"></span>Setting</a></li>
<li><a href="password.html" target="right"><span class="icon-caret-right"></span>Change Password</a>
</li>
<li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Course</a>
</li>
<li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a>
</li>
<li><a href="CourseManner.html" target="right"><span class="icon-caret-right"></span>Enroll Tutorial</a>
</li>
</ul>
</div>
<div class="right">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
<th scope="col">标题</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">2</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">3</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">4</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">5</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">6</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">7</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th scope="row">8</th>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>