المشكلة في القسم serv الذي يسبق القسم team3 , والمشكلة بالتحديد العنصر الذي لديه الصنف banner-img , لقد قمت باعطائه التنسيقات التالية

section.team .serv .banner-img {
    float: right;
    ^^^^^^^^^^^^^^
    width: 530px;
    height: 500px;
    transform: translateY(-320px);
}

بعد استخدام خاصية float يجب استخدام الخاصية clear للعنصر الأب أي العنصر overlay2 , هناك طريقة ابسط لفعل ذلك ولا داعي لاستخدام الخاصية float أو الخاصية transform, يمكنك أولا حذف الخاصيتين float و transform من العنصر banner-img واعطاءه هامش خارجي من جهة الشمال من خلال الخاصية margin كالتالي

section.team .serv .banner-img {
    width: 530px;
    height: 500px;
    margin-left: auto;
}

ويمكننا اعطاء الصنف overlay2 الخاصية display وقيمتها flex وبشكل تلقائي سوف تعرض العناصر بشكل افقي

section.team .overlay2 {
    background-color: rgba(40, 42, 42, .92);
    padding-left: 11.5%;
    padding-right: 14.5%;
    height: 430px;
    display: flex;
}

سوف تعرض العناصر بشكل أجمل بهذا الشكل ,وأيضا سوف تظهر الصورة الخاصة بالجوال بشكل كبير لأنك حددت عرض 99% لجميع الصور بداخل القسم team , لاحظ

section.team img {
    width: 99%;
}

يمكنك تحديد الصورة بشكل محدد لكي لا تطبق على جميع الصور

بتاريخ 24 دقائق مضت قال محمد أبو عواد:

المشكلة في القسم serv الذي يسبق القسم team3 , والمشكلة بالتحديد العنصر الذي لديه الصنف banner-img , لقد قمت باعطائه التنسيقات التالية

section.team .serv .banner-img {
    float: right;
    ^^^^^^^^^^^^^^
    width: 530px;
    height: 500px;
    transform: translateY(-320px);
}

بعد استخدام خاصية float يجب استخدام الخاصية clear للعنصر الأب أي العنصر overlay2 , هناك طريقة ابسط لفعل ذلك ولا داعي لاستخدام الخاصية float أو الخاصية transform, يمكنك أولا حذف الخاصيتين float و transform من العنصر banner-img واعطاءه هامش خارجي من جهة الشمال من خلال الخاصية margin كالتالي

section.team .serv .banner-img {
    width: 530px;
    height: 500px;
    margin-left: auto;
}

ويمكننا اعطاء الصنف overlay2 الخاصية display وقيمتها flex وبشكل تلقائي سوف تعرض العناصر بشكل افقي

section.team .overlay2 {
    background-color: rgba(40, 42, 42, .92);
    padding-left: 11.5%;
    padding-right: 14.5%;
    height: 430px;
    display: flex;
}

سوف تعرض العناصر بشكل أجمل بهذا الشكل ,وأيضا سوف تظهر الصورة الخاصة بالجوال بشكل كبير لأنك حددت عرض 99% لجميع الصور بداخل القسم team , لاحظ

section.team img {
    width: 99%;
}

يمكنك تحديد الصورة بشكل محدد لكي لا تطبق على جميع الصور

شكرا" استاذي كنت اعطي ال banner-img ---transform لانها هكذا في الشكل الاصلي ولكن قمت بها مثلما قلت 

نجح الامر ولكن لم استوعب كيف اضع clear ولماذا هل عند استعمال transform بشكل عشوائي يؤثر عل الصفحه او السكاشن الاخري؟

بتاريخ الآن قال Ahmed Alfadaly:

شكرا" استاذي كنت اعطي ال banner-img ---transform لانها هكذا في الشكل الاصلي ولكن قمت بها مثلما قلت 

نجح الامر ولكن لم استوعب كيف اضع clear ولماذا هل عند استعمال transform بشكل عشوائي يؤثر عل الصفحه او السكاشن الاخري؟

دائما بعد استخدام خاصية float نحتاج لاستخدام الخاصية clear لكي لا تؤثر خاصية التعويم -float- على العناصر التالية , أما بالنسبة لخاصية transform فمن الممكن أن يتم ازاحة العناصر بشكل كبير فيتم تداخلها مع عناصر أخرى , هكذا ممكن أن تؤثر هذه الخاصيات على عرض العناصر

بتاريخ 29 دقائق مضت قال محمد أبو عواد:

دائما بعد استخدام خاصية float نحتاج لاستخدام الخاصية clear لكي لا تؤثر خاصية التعويم -float- على العناصر التالية , أما بالنسبة لخاصية transform فمن الممكن أن يتم ازاحة العناصر بشكل كبير فيتم تداخلها مع عناصر أخرى , هكذا ممكن أن تؤثر هذه الخاصيات على عرض العناصر

شكرا" استاذي