<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>My Site</title>
  <meta name="description" content="The HTML">
  <meta name="author" content="Me Testing">

  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <link href="https://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 

</head>

  <div id="wrapper">
    <h1>My Site</h1>
     <div class="container">
          <div class="col1">
            <menu>
               <li><a href="">Result</a></li>
               <li><a href="">Search</a></li>
            </menu>
          </div>

         <div class="col2">
            <menu>
              <li><a href="">Submit</a></li>
              <li><a href="">Listing</a></li>
           </menu>
         </div>
   </div> <!-- container -->
    <div id="google_map">
      <img src="https://tctechcrunch2011.files.wordpress.com/2013/05/sf-search-results.png" width="1148" height="756"/>  <!-- 1148 756 -->
    
    </div><!--google ,map-->  
    
      <div id="results">
       <div id="one"><img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?dpr=1&auto=format&fit=crop&w=376&h=251&q=60&cs=tinysrgb" width="250" height="250" /></div>
       <div id="two">Name of the Restaurant</div>
    </div>  
  </div> <!-- wrapper-->
</body>

</html>
body {
  background-color: #0A1827;
  
}

#wrapper {
    max-width: 1350px;
    margin: 0 auto;
    border: 5px solid #FFFFFF;
}

h1 {
     /*border: 1px solid yellow;*/
     font-family:'Pacifico', Arial, Verdana, sans-serif;
     font-size: 2.2em;
     color: #F25E38;
     text-align: center;
  
  
}

.container {
    display:table;
    width: 100%;
}
.col1,  .col2 {
    display:table-cell;
    /*background-color: #8A888B;*/
    /*border: solid 1px blue;*/
    width: 49%;
}

menu {
    list-style-type:none; 
    margin:0;   
    padding:0;
}

menu li {  
    display: inline;  
} 

menu li a {  
    display:block;  
    padding:0 80px; 
    color:#FFFFFF;  
    text-decoration:none;  
    /*border: solid 1px white;*/
    font-family:'Mouse Memoirs', Arial, Verdana, sans-serif;
    font-size: 2.2em;
} 
 

li:first-child { 
  float: left;
}

li:nth-child(2) {
  float: right;
}

#google_map {
  width: 96%;
  max-width: 1148px;
  border: solid 5px #F25E38;
  margin: 20px auto;
}

#google_map img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    vertical-align: top;
}

#results {
    display: flex;
    width: 96%;
    margin: 0 auto;
    max-width: 1148px;
    border: solid 5px #F25E38;
}

#one, #two {
    flex-direction: row;
    background-color: yellow;
    border: solid 1px red;
}

@media screen and (max-width:1000px) {
 
  menu li {
     display: block;
    text-align: center; 
  }
  
  li:first-child { 
   float: none;
  }

  li:nth-child(2) {
     float: none;
  } 
}

@media screen and (max-width:500px) {
  menu li a {  
     padding:0 20px; 
  } 
}

/* iPhone */
@media screen and (max-width:375px) {
   .col1,  .col2 {
      display:block;
      width: 100%;
    }
  
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.