Changed from 1 column to 2

frontend/src/components/MainColumn.js

@@ -2,11 +2,11 @@ import Logo from './Logo';
 import ScanBlocks from './ScanBlocks';
 
 const MainColumn = () => (
-  <div className="centerBlockOuter">
+  <>
-    <div className="centerBlockInner">
+    <Logo />
-      <Logo />
+    <div className="centerBlockOuter">
       <ScanBlocks />
     </div>
-  </div>
+  </>
 );
 export default MainColumn;

frontend/src/components/ScanBlocks.js

@@ -14,14 +14,18 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <IntlBlock />
+    <div className="centerBlockInner">
-    <FingerprintBlock />
+      <IntlBlock />
-    <LocationBlock />
+      <FingerprintBlock />
-    <ConnectionBlock />
+      <NavigatorBlock />
-    <NavigatorBlock />
+      <UserAgentBlock />
-    <UserAgentBlock />
+    </div>
-    <ScreenBlock />
+    <div className="centerBlockInner">
-    <OtherBlock />
+      <LocationBlock />
+      <ConnectionBlock />
+      <ScreenBlock />
+      <OtherBlock />
+    </div>
     {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />

frontend/src/styles/App.css

@@ -36,28 +36,25 @@
   right: 12px;
 }
 
-.centerBlockOuter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 0 auto;
-  margin: 0 18px;
-}
-
-.centerBlockInner {
-  width: 650px;
-  margin: 24px 0 0 0;
-}
-
 .logoWrap {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 13px 0;
 }
 
 .logo {
   width: 270px;
-  margin: 0 0 14px 0;
+}
+
+.centerBlockOuter {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.centerBlockInner {
+  width: 450px;
 }
 
 .contentBlock {