The basic idea was the remove floats from the layout and switch to flexbox.
- There is a selector
.page:not(.home) #content
which holds the content for site; changed the style to
padding-bottom: 100px;
padding-right: 30px;
padding-left: 200px;
display: flex;
justify-content: center;
and for the size max-width: 767px
padding-left: 60px !important;
padding-right: 20px !important;
and for max-width: 1023px
flex-wrap: wrap;
- The content section in
.wrap
then needs to specify its own sizing
flex-basis: 600px;
flex: 1 1;
and for size min-width: 1024px
margin-right: 40px;
also removed all other margins, paddings, floats
.latest
needs to adjust to have normal flow
width: 240px;
video#latest-post-image
and .latest-post
needs to remove position: absolute;