CSS Grid overlapping and responsive help

HI I am trying to code a grid and it keeps overlapping even though I specify which columns for the items to “sit” in.

Also, when I did get it to work with padding, my navigation no longer was responsive.

Any help is appreciated.

HTML:

<div class="brand"><h1 class="marnell">MARNELL COMPANIES</h1></div>
<div class="line1"><hr></div>		
		
 
 
<div class="team"><img src="#" width="350px"></div>	
	
<div class="text">
	
<H3>TONY A MARNELL</H3>	
	
<p>Through decades of education, experience, and working knowledge, Mr. Marnell has propelled Marnell Companies and its associates to become internationally acclaimed for the design and construction of some of the world’s most recognizable and renowned resort, hotel and gaming properties.

Prior to forming Marnell Companies in 1982, Mr. Marnell was employed by Corrao Construction Company, Inc., Zuni Construction Company, Moffitt & McDaniel Architects, and architect Alfred Caldwell. In 1986 when the Rio Hotel & Casino, Inc. was formed, Mr. Marnell held the position of Chairman of the Board and served as Chief Executive Officer of the company and its wholly owned subsidiary Rio Suite Hotel & Casino until its acquisition by Harrah’s Entertainment, Inc. on January 1, 1999.

	</p>	
</div>

CSS:

@charset “utf-8”;
@media (min-width: 600px){
}

.wrapper{
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-areas: 
		"searchBox searchBox searchBox searchBox searchBox searchBox"
		"navi navi navi navi navi navi"
		"brand brand brand brand brand brand"
	"team team team text text text"
		"team team team text text text"
		"team team team text text text"
		"footer footer footer footer footer footer"
		
  	
}

/--------------typography---------------------/
body,
button,
input,
select,
textarea {
color: #404040;
font-family: ‘Helvetica’, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}

a{
color: #FFFFFF;
}

h1.marnell {
font-family: Optima; src: url(‘LT_5.ttf’);
text-align: center;
margin: 0;
padding: 10,10,50,10;
font-size: 24px;
letter-spacing: 10px;
grid-column: 2/3;
grid-row: 2/2;

}

h2.main {
font-family: Optima; src: url(‘LT_5.ttf’);
text-align: center;
margin: 0;
padding: 10,10,50,10;
font-size: 18px;
letter-spacing: 10px;

}

h3 {
font-family: Optima; src: url(‘LT_5.ttf’);
text-align: left;
margin: 0;
padding: 8px 0 25px 0;
font-size: 20px;

}

p{
text-align: left;
margin: 0, 0, 50px 0;
padding: 10px, 10px, 50px, 50px;
font-size: 14px;
}

/-------------------search bar----------------------------/

input.gsc-input{
background: rgb(255, 255, 255)!important;

}
.searchBox{
grid-area: searchBox;
width: 300px;
margin: 0 100px 0 0;
padding: 0;
background-color: #e9e9e9;

}

/--------------------------------------------------------------------------
Navigation Bar
--------------------------------------------------------------------------
/

html,body,nav, ul, li, a, span{
margin:0; padding:0;
}
body{
font-family:helvetica;
font-size:16px;

}

.menu{
padding: 15px 25px 0 25px;
}

nav{
display: grid;
grid-area: nav;
text-align: center;
align-content: center;
align-items: center;
margin: 0;
padding: 0 3em 3em;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;
}

nav ul {
background-color:#fff;

flex-direction:column;
}
nav li{
display: inline;
list-style-type: none;

}
nav li a{
padding:1em 3em 0em 1em;

display: inline;
text-decoration: none;
color:#787878;
}
nav li:hover{
background:rgba(0,0,0, .25);
}

.arrow{
font-family:FontAwesome;
float:right;
}
.arrow-down::after{
content:"\f107";
}
.arrow-right::after{
content:"\f105";
}

/----------------------hamb menu----------------------------/

.navi {
grid-area: nav;
padding: 0 25px;
text-align: center;
justify-content: center;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 3;
}

span {
color: #gray;
}

label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 50px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}

/-----------------------end of nav--------------/

.searchBox{
grid-area: searchBox;
float: right;
grid-column-start: 5;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 2;
}

.menu{
grid-area: navi;
margin: 0;
padding: 0 25px;
grid-column: 1/7;
grid-row: 2/3;
}
.brand{
grid-area: brand;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 3;
grid-row-end: 4;
}

hr {
clear: both;
}

.line1{

grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 4;
grid-row-end: 4;

}

.team{
grid-area: team;
float: left;
margin: 0;
padding: 0;
grid-column: 1/2;
grid-row: 5/7;
}

.text{
grid-area: team;
float: left;
margin: 0;
padding: 25px 25px 25px 100px;
grid-column: 6/7;
grid-row: 5/7;
}

hr {
clear: both;
}

.line2{
padding: 0 0 2em 0;
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 8;
grid-row-end: 8;
}

.home{

margin: 0;
padding: 2em;
background-color: #ECECEC;
grid-column: 1/7;
grid-row: 9/10;

}

.footer{
grid-area: footer;
background-color: #343434;
padding: 2em 2em 1em 2em ;
font-size: 12px;
text-align: center;
color: #CCCCCC;
width: auto;
height: 50px;
grid-column: 1/7;
grid-row: 14/15;

}

@media only screen and (max-width:480px){
/* wrapper grids */

.wrapper{	
	grid-template-columns: 1fr;
grid-template-areas: 
	"searchBox"
	"brand"
	"nav"
	

	"footer";

}
h1.marnell	{
font-family: Optima; src: url('LT_5.ttf');
text-align: center;
margin: 0;
padding: 10,10,50,10;
font-size: 175% !important;
letter-spacing: 10px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 2;

}
h2.main {
min-width: 300px;
font-family: Optima; src: url(‘Optima Medium.ttf’);
text-align: center;
font-size: 100% !important;
margin: 0;
padding: 10,10,50,10;
font-size: 15px;
letter-spacing: 10px;

}

  nav ul{
flex-direction:column;

/* justify-content:flex-end; */
}

.has-children ul li a{
padding-left:2rem;

}

.has-children ul .has-children ul a{
padding-left:3rem;
display: inline-block;
}
.arrow-down::after{
content:"\f107";
}

 label {
    display: block;
    cursor: pointer;
}
.menu {
    text-align: center;
    width: 100%;
    display: none;
}
.menu a {
    display: block;
  border-bottom: 1px solid #EAEAEB;
    margin: 0;

		
 
}
#toggle:checked + .menu {
    display: block;
}

}

.team{
grid-area: team;

}

.text{
grid-area: text;

}