To provide you with specific advice, I would need to completely adjust the CSS code to demonstrate how it can be done. After reviewing the source, I noticed that the theme follows a 'mobile-first' approach, meaning the default layout is designed for mobile devices and media queries are used to modify the layout for wider viewports. An example of this can be seen in the styling of the container containing your blog posts:
.the-posts {
float: left;
clear: both;
width: 100%;
position: relative;
margin-top: 30px;
}
@media only screen and (min-width: 768px) {
.the-posts {
margin-top: 40px;
}
}
@media only screen and (min-width: 1024px) {
.the-posts {
float: right;
width: 560px;
margin-top: -88px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.the-posts.ready {
opacity: 1;
visibility: visible;
}
}
When the browser window exceeds 1024px in width, the .the-posts element shifts to the right side of the screen.
To achieve the desired layout, consider replacing the default CSS rules for .the-posts with those intended for desktop viewing and eliminate the media query rules:
.the-posts {
float: right;
width: 560px;
margin-top: -88px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
It's important to apply this adjustment to other elements as well for consistency in the design.