Add styles to the div container and to the title and calculator class…

… names to display the elements on the screen

src/styles/calculator.css

@@ -1,3 +1,8 @@
+.calculator-wrapper {
+ display: flex;
+ justify-content: space-between;
+}
+
 .calculator {
  width: 400px;
  background-color: rgb(240, 240, 240);
@@ -8,6 +13,10 @@
  margin-top: 100px;
 }
 
+.title {
+ margin-top: 100px;
+}
+
 .display {
  background-color: rgb(100, 56, 67);
  color: rgb(255, 255, 255);
@@ -48,3 +57,19 @@
 .button:hover {
  background-color: rgb(200, 142, 167);
 }
+
+@media (max-width: 767px) {
+ .container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .title {
+ display: none;
+ }
+
+ .calculator {
+ margin-top: 40px;
+ }
+}