同じサイズのボックスを横に並べて表示

Question

トップコンテナの横に並んだ2つのボックスを作成するのに苦労しています。私がしたいのは、左側に連絡フォームがあり、次に右側に私の詳細があります。ウィンドウが最小化されると、両方がお互いの上に落ちるようになります。

問題を簡略化するためにいくつかのコードを削除しました.HTMLの一部または全部が必要かどうか教えてください。

HTML

<section> 
    <div class="container"> 
     <div class="dark"> 
      <div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div> 
      <h2>Get A Quote</h2> 
      <p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages.</p> 

</div> 
</div> 


<div class="container"> 
    <div class="dark"> 
    <div> 
    </div> 

     <form class="quote"> 
      <div> 
      <label>Name</label><br> 
      <input type="text" style="width: 150px;"> 
      </div> 
      <div> 
      <label>Email</label><br> 
      <input type="email" style="width: 150px;"> 
      </div> 
      <div> 
      <label>Phone</label><br> 
      <input type="text" style="width: 150px;"> 
      </div> 
      <div> 
      <label>Message</label><br> 
      <textarea style="width:250px; height:100px;"></textarea> 
      </div> 
      <button class="button_1" type="submit" style="width: 

50px;">Send</button> 
</form> 

      </div> 
     </div> 
     </article> 
</section> 

<footer> 
<div> 
    <p>Darren Brady Plumbing Copyright &copy; 2017</p> 
    </div> 
</footer> 

CSS

body{ 
    font: 100%/1.5 Arial, Helvetica,sans-serif; 
    padding:0; 
    margin:0; 
    background-color:white; 
} 

/* Style the list 'container' */ 
ul.topnav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 

/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */ 
ul.topnav li { 
    float: left; 
} 

/* style the links */ 
ul.topnav li a { 
display: inline-block; 
color: white; 
text-align: center; 

text-decoration: none; 
transition: 0.3s; 
font-size: 100%; 
} 

/* hover */ 
ul.topnav li a:hover { 
color: gold; 
} 


/* Hide the icon initially */ 
ul.topnav li.icon {display: none;} 

/* Global */ 
.container{ 
    width:70%; 
    margin:auto; 
    overflow:hidden; 
    /* Allows the burger nav and branding to sit on the same line */ 


} 

a{ 
    text-decoration: none; 
    text-shadow: 50px; 
    color: black; 
} 

ul{ 
    margin:0; 
    padding:0; 
} 

.subscribe{ 
    height:38px; 
    background:gold; 
    border:0; 
    padding-left: 20px; 
    padding-right:20px; 
    color:black; 
} 

.dark{ 
    padding:25px; 
    background:#35424a; 
    color:white; 
    margin-top:10px; 
    margin-bottom:10px; 
} 


.maps { 
     position: relative; 
     padding-bottom: 75%; // This is the aspect ratio 
     height: 0; 
     overflow: hidden; 
} 
.maps iframe { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100% !important; 
     height: 100% !important; 
    } 

/* Header **/ 
header{ 
    background:#35424a; 
    color:white; 
    padding-top:30px; 
    min-height:70px; 
    border-bottom:gold 5px solid; 
} 

header a{ 
    color:#ffffff; 
    text-decoration:none; 
    text-transform: uppercase; 
    font-size:100%; 
} 

header li{ 
    float:left; 
    display:inline; 
    padding: 0 20px 0 20px; 
} 

header #branding{ 
    float:left; 
} 

header #branding h1{ 
    margin:0; 
} 

header nav{ 
    float:right; 
    margin-top:10px; 
} 

header .highlight{ 
    color:gold; 
} 

header a:hover{ 
    color:gold; 
} 

h3 .bronze{ 
    color:#cc6633; 

} 

h3 .silver{ 
    color:silver; 

} 

h3 .gold{ 
    color:gold; 

} 

img { 
width:90%; 
height:auto; 
} 

/* Showcase */ 
#showcase{ 
    min-height:400px; 
    color:black; 
} 

#showcase h1{ 
    margin-top:50px; 
    font-size:300%; 
    margin-bottom:10px; 
} 

#showcase p{ 
    font-size:120%; 
} 

/* Newsletter */ 
#newsletter{ 
    padding:15px; 
    color:#ffffff; 
    background:#35424a 
} 

#newsletter h1{ 
    float:left; 
} 

#newsletter form { 
    float:right; 
    margin-top:15px; 
} 

#newsletter input[type="email"]{ 
    padding:4px; 
    height:26px; 
    width:250px; 
} 


/* Sidebar */ 
aside#sidebar{ 
    float:right; 
    width:25%; 
    margin-top:10px; 
} 

section#contactus .quote input, section#contactus .quote textarea{ 
    width:30%; 
    padding:5px; 
} 

/* Main-col */ 
article#main-col{ 
    float:left; 
    width:70%; 
} 


/* Imagery */ 

#social { 
    margin-top: 10%; 
    text-align: center; 
    font-size: 150%; 
    color: black; 
} 

#imagery { 
    margin-top: 5%; 
    margin-bottom: 5%; 
} 

#imagery .box { 
float: right; 
text-align: center; 
width: 30%; 
padding:10px; 

} 

#imagery .box i{ 
    font-size: 700%; 
} 

/* Create four equal columns that floats next to each other */ 
.column { 
    float: left; 
    width: 20%; 
    padding: 10px; 

} 

.column img { 
    margin-top: 12px; 
    width: 100%; 
} 

/* Clear floats after the columns */ 
.row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.container .visuals{ 
    float: right; 
} 

.container .callus{ 
    float: right 
} 

.fa-phone { 
color: gold; 
} 


/* Services */ 
ul#services li{ 
    list-style: none; 
    padding:20px; 
    border: #cccccc solid 1px; 
    margin-bottom:5px; 
    background:#35424a; 
    color: white; 
} 


footer{ 
    padding:20px; 
    margin-top:20px; 
    color:black; 
    background-color:gold; 
    text-align: center; 
} 


/* Media Queries */ 
@media(max-width: 768px){ 
    header #branding, 
    header nav, 
    header nav li, 
    #newsletter h1, 
    #newsletter form, 
    #boxes .box, 
    article#main-col, 
    aside#sidebar{ 
    float:none; 
    text-align:center; 
    width:100%; 
    } 

    header{ 
    padding-bottom:20px; 
    } 



    #showcase h1{ 
    margin-top:40px; 
    } 

    #newsletter button, .quote button{ 
    display:block; 
    width:100%; 
    } 

    #newsletter form input[type="email"], .quote input, .quote textarea{ 
    width:100%; 
    margin-bottom:5px; 
    } 


    /* nav */ 
ul.topnav li { 
    display: none; 
} 

ul.topnav li.icon { 
display: inline-block; 
} 


ul.topnav.responsive {position: relative;} 
ul.topnav.responsive li.icon { 
position: absolute; 
right: 0; 
top: 0; 
} 
ul.topnav.responsive li { 
float: none; /* 'un' float the list items so they return to displaying vertically */ 
display: inline; 
} 
ul.topnav.responsive li a { 
display: block; 
text-align: left; 
} 
} 

/* 400 pixels */ 
@media screen and (max-width: 400px){ 
    header #branding, header nav, header nav li { 
    text-align: center; 
    width:115%; 
    font-size: 100% 
    } 
    header ul{ 
    padding:10px; 
    font-size: 100%; 
    } 

#social { 
    font-size: 150%; 
} 

#showcase { 
    min-height: 400px; 
    font-size: 80%; 
} 

#imagery .box{ 
    size: 10px 10px; 

} 

/*css reset 
* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

/* HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 

body { 
    line-height: 1; 
    background-image: url("bg.jpg"); 
    background-size: cover; /*this seems better*/ 
    /*background-size: contain; 

} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* end reset */ 

Answer 1

私はあなたのコードを理解しようとしたが、あなたが望んでいたかを知ることは困難alttleました。 私は、これはあなたが本当にコードの塊を台無しに提供

<html> 
    <head> 

    <!--add these bootstap links to your head section--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <section> 

     <div class="row"> // this class helps you create a rows using bootstrap's grid layout 
      <div class="container col-md-5"> // now you can add the col-md-5 
            //class toy your divs to make   them side by side but responsive 
       <div class="dark"> 
        <div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div> 
        <h2>Get A Quote</h2> 
        <p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages.</p> 

       </div> 
      </div> 

      <div class="container col-md-7"> // this makes a larger column for you 
       <div class="dark"> 
        <div> 
        </div> 

        <form class="quote"> 
         <div> 
          <label>Name</label><br> 
          <input type="text" style="width: 150px;"> 
         </div> 
         <div> 
          <label>Email</label><br> 
          <input type="email" style="width: 150px;"> 
         </div> 
         <div> 
          <label>Phone</label><br> 
          <input type="text" style="width: 150px;"> 
         </div> 
         <div> 
          <label>Message</label><br> 
          <textarea style="width:250px; height:100px;"></textarea> 
         </div> 
         <button class="button_1" type="submit" style="width: 50px;">Send</button> 
       </div> 
      </div> 
     </div> 

    </section> 

    <footer> 
     <div> 
      <p>Darren Brady Plumbing Copyright &copy; 2017</p> 
     </div> 
    </footer> 
</body> 
</html>