main .blog-container { display: flex; align-items: center; justify-content: center; } main .blog-container .blog-content { margin-top: 100px; width: 100%; } main .blog-container .blog-content .blog-title-container { margin-top: 20px; text-align: center; border-top: 1px solid rgb(95, 159, 166, 0.5); width: 70%; } main .blog-container .blog-content .blog-title-main { color: #5f9fa6; display: inline-block; background-color: #fff; font-size: 32px; margin-top: -30px; padding: 0px 25px; } /* start styling the blogs part */ main .blogs{ margin-top: 50px; } main .blogs:first-child { margin-top: 80px; } main .blogs .blog-row1, main .blogs .blog-row2 { width: 100%; height: 300px; white-space: nowrap; overflow: hidden; } main .blogs .blog-row2 { margin-top: 40px; } main .blogs .blog-row1 .blog1 { height: 100%; width: 55%; display: inline-block; margin-top: 0px; overflow: hidden; position: relative; } main .blogs .blog-image:hover { opacity: 0.3; cursor: pointer; } main .blogs .blog-row2 .blog4 { height: 100%; width: 55%; display: inline-block; margin-top: 0px; overflow: hidden; margin-right: 62px; } main .blogs .blog-image { width: 100%; height: 85%; transition: all 0.3s ease-out; } main .blogs .blog-image img { width: 100%; height: 100%; } main .blogs .blog-details { width: 100%; height: 15%; border-radius: 0px 0px 5px 5px; background-color: #deebec; line-height: 42.44px; font-size: 18px; padding: 0px 20px; } main .blogs .blog-details span { float: right; } main .blogs .blog-details .blog-title { float: right; } main .blogs .blog-details .blog-time { float: left; font-size: 15px; } main .blogs .blog-row1 .blog2 { height: 100%; width: 40%; display: inline-block; margin-top: 0px; overflow: hidden; margin-right: 62px; } main .blogs .blog-row2 .blog3 { height: 100%; width: 40%; display: inline-block; margin-top: 0px; overflow: hidden; }