fix layout problems

src/elements/FavoriteCard/index.tsx

@@ -12,12 +12,15 @@ export const FavoriteCard:React.FC<FavoriteCardIE> = (props) =>{
 
     return (
         <div className="favoriteCard">
-            <div>
+            <div className="img-cnt">
                 <img className="imageFavoriteCard" src={props.imageURL}></img>
-                <img onClick={()=>setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}></img>
+                <img width={40} onClick={()=>setLiked(!liked)} className="likeButton" src={liked? 'likeButtonActive.svg':'likeButton.svg'}></img>
+            </div>
+            <div className="tr-cnt">
+                <span className="titleFavoriteCard">{props.title}</span>
+                <br />
+                <span className="locationFavoriteCard">{props.location}</span>
             </div>
-            <div className="titleFavoriteCard">{props.title}</div>
-            <div className="locationFavoriteCard">{props.location}</div>
         </div>
     );
 }

src/elements/FavoriteCard/style.css

@@ -1,20 +1,14 @@
 .favoriteCard{
-    display: flex;
-    flex-direction: column;
-    gap:5px;
-    margin-left: -35px;
+    display: block;
 }
 
 .imageFavoriteCard{
     border-radius: 30px;
-    
 }
 .likeButton{
-    position: relative;
-    right: 50px;
-    bottom: 10px;
     cursor: pointer;
     transition: 0.3s;
+    transform: translateY(-60px) translateX(10px);
 }
 .likeButton:hover{
     transform: scale(1.1);
@@ -27,3 +21,10 @@
 .locationFavoriteCard{
     font-size: 16px;
 }
+.img-cnt{
+    display: flex;
+    flex-direction: column;
+}
+.tr-cnt{
+    transform: translateY(-40px);
+}

src/elements/Header/index.tsx

@@ -3,6 +3,7 @@ import './style.css'
 
 export const RusPassHeader:React.FC = () =>{
     return(
+        <div className="padding">
             <div className="headerWrapper">
                 <div className="iconWrapper">
                     <img className="headerIcon" src='logo.svg'></img>
@@ -18,5 +19,7 @@ export const RusPassHeader:React.FC = () =>{
                     <img className="headerIcon" src='profile.svg'></img>
                 </div>
             </div>
+        </div>
+        
     );
 }

src/elements/Header/style.css

@@ -1,10 +1,13 @@
 .headerWrapper{
     height: 100px;
-    padding: 10px 50px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: calc(100%-100px); 
+}
+.padding{
+    padding-left: 50px;
+    padding-right: 50px;
+    width: calc(100% - 100px);
 }
 
 .iconWrapper{

src/pages/Main/index.tsx

@@ -52,7 +52,7 @@ export const Main: react.FC = () => {
          </div>
          <div className='mainCard'>
             <h2>Добавьте в избранное</h2>
-            <div className='cardWrapper' style={{gap:'10px'}}>
+            <div className='fav-wrapper'>
                <FavoriteCard {...favoriteCardProps}></FavoriteCard>
                <FavoriteCard {...favoriteCardProps}></FavoriteCard>
                <FavoriteCard {...favoriteCardProps}></FavoriteCard>

src/pages/Main/style.css

@@ -7,16 +7,28 @@
     gap:25px;
     border-radius: 48px;
     padding: 50px;
+    width: calc(100% - 200px);
+}
+.mainCard>h2{
+    display: inline-block;
+    width: 400px;
 }
 
 .cardWrapper{
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap:25px;
     justify-content: center;
 }
 
+.fav-wrapper{
+    display: flex;
+    justify-content: space-between;
+    gap: 25px;
+    flex-wrap: wrap;
+}
+
 .grey{
     font-size: 12px;
     color:#1D1D1D