How to fix divs to be responsive?


I want them to be next to each other.
That’s the problem

	<div id="nav">
			<ul>
        <li><a href="index.html">Home</></a></li>
        <li><a href="index.html">Projects</></a></li>
				<li><a href="index.html">Contact Me</a></li>
				<li><a href="index.html">About</a></li>
			</ul>
			</div>

	<div id="boxes">
			<ul>
        <div id='tbd'><li><a href="index.html">To be determined</div></a></li>
        <div id='projects'><li><a href="index.html">Projects</div></a></li>
				<div id='contact'><li><a href="index.html">Contact Me</div></a></li>
				<div id='about'><li><a href="index.html">About</div></a></li>
			</ul>
			</div>
<div style="clear:both;"></div>
body {
  background-color: white;
  margin: 0;
  margin-top: -17px;
}
#nav ul li{
  float: right;
  text-align:right;
  font-size: 17px;
  font-family: Comic sans ms;
  margin-left: 11px;
  width: 200px
  margin-right:50px;
  margin-right: 70px;
  padding: 9px;
  list-style-type: none;

  margin-top: -18px;
  text-transform: uppercase;
  box-shadow: 3px 1px 3px black;
  font-weight: bold;
  
  }
#nav ul li a {
  text-decoration: none; 
}
#nav {
  float:right;
    width:1950px;
  height: 35px;
  background-color: #11181C;
  border: 1px solid black;
  box-shadow: 5px 6px 15px black;
  opacity: .9999
  overflow: hidden;
  overflow: hidden;
}

#nav ul li a:hover {
  background-color: black;
  color: #fff;
  
}
#tbd {
  border: 1px solid black;
  width: 430px;
  height: 430px;
  background-color: silver;
  float: left;
  font-size: 70px;
  margin-top: 27px;
  text-align: center;
  list-style-type: none;
  box-shadow: 5px 6px 33px black;
  
  
}
#projects {
  border: 1px solid black;
  width: 430px;
  height: 370px;
  background-color: silver;
  float: left;
  font-size: 70px;
  margin-top: 27px;
  text-align: center;
  list-style-type: none;
  box-shadow: 5px 6px 33px black;
  
}
#contact {
  border: 1px solid black;
  width: 430px;
  height: 370px;
  background-color: silver;
  float: left;
  font-size: 70px;
  margin-top: 27px;
  text-align: center;
  list-style-type: none;
  box-shadow: 5px 6px 33px black;
}

#about {
  border: 1px solid black;
  width: 430px;
  height: 430px;
  background-color: silver;
  float: left;
  font-size: 70px;
  line-height: 500px;
  margin-top: 27px;
  text-align: center;
  list-style-type: none;
  box-shadow: 5px 6px 33px black;
  
}
#boxes {
  
  margin-left: 50px;
  margin-top:  
}

a {
   text-decoration:none;
}

#boxes tbd li a {
  margin-top: 
}

Can you share the link to your codepen?

Try putting them in a container div with display:“flex”. Then arrange them horizontally/vertically with flex-direction, either “column” or “row”.