make a div a square in css : how do i make those box divs look like a little box or a square however you want to call them, please, i set #header's width and height and on those it doesn't work...

        <!DOCTYPE HTML>
    <html lang="en"> 
    	<head>
    		<title>A Page</title>
    		<link type="text/css" rel="stylesheet" href="css/main.css" />
    		<!-- GOOGLE FONTS -->
    			<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" />
    		
    		
    	</head>
    	<body>
    		<div id="header">
    			<div id="search">
    				<form>
    					<div id="box" class="text">
    						<input type="text" placeholder="Search" />
    					</div>
    					<div id="box" class="small">
    						<input type="image" src="" alt="submit" />
    					</div>
    				</form>
    			</div>
    			
    			<div id="menu">
    				<a href=""><div id="box" class="big"></div></a>
    				<a><div id="box" class="small"><img></img></div></a>
    				<a><div id="box" class="small"><img></img></div></a>
    				<span id="notifications"></span>
    			</div>
    		</div>
    		
    		<br />
    		
    		<div id="box" class="big">
    		
    		</div>

and this is the css i tried:

   

     body{
    	font-family: 'Prompt', sans-serif;
    	background: #707070;
    }
    
    #header{
    	background: #e2ecf2;
    	opacity: 0.87;
    	border-radius: 30px;
    	height: 60px;
    	width: 1000px;
    	position: fixed;
    	left: 50%;
    	top: 25px;
    	transform: translateX(-50%);
    }
    
    #box{
    	outline: 3px;
    	outline-style: solid;
    	outline-color: #d7d7d7;
    }
    
    #box .small{
    	width: 35px;
    	height: 35px;
    }
    
    #box .big{
    	width: 50px;
    	height: 50px;
    }
    
    #header #search{
    	margin-left: 37px;
    }
    
    #header #search input{
    	float: left;
    	margin-left: 20px;
    }

pls. i doesn't make any sense... i am litterally crashing here :((
