Theme Alignment Issues on Smartphones

Hi, I have the same problem.

I have added some Custom CSS using Jetpack just to change the font styles and sizes of the theme. The site looks fine on a laptop/desktop.

On a smartphone, the homepage is okay. However, if i click on a post, it would align left, leaving a blank space on the right margin.

my blogsite is https://www.baby-talks.com

a little help. thanks.

here are the Custom CSS codes I added using Jetpack.

.site-content {
float: left;
margin: 0 -25% 0 0;
width: 90%;
}

#secondary {
/* Sidebar 1 */
float: right;
overflow: hidden;
width: 30%;
}

.entry-title,
.entry-title a {
color: #f38533;
font-family: Helvetica, sans-serif;
font-size: 26px;
font-size: 2.3rem;
line-height: 36px;
margin: 0 0 .25em;
padding: 0;
text-transform: capitalize;
}

p {
border: 0;
font-family: Helvetica, sans-serif;
font-size: 85%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

.hentry {
background-color: rgba(255,255,255,.6);
margin: 0 0 2em;
padding: 1em;
position: relative;
z-index: 50;
}

.entry-meta {
color: #777;
font-family: Helvetica, sans-serif;
font-size: 11px;
font-size: 1.1rem;
text-transform: capitalize;
}

.entry-header {
margin: 0 0 1em;
}

p {
margin: .5em 0;
}

strong {
font-weight: bolder;
}

.widget-title {
color: #777;
font-family: “Port Lligat Sans”, Helvetica, sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1em;
margin: 0 0 .8em;
padding: 0;
text-transform: uppercase;
}

a {
border: 0;
font-family: “Port Lligat Sans”, Helvetica, sans-serif;
font-size: 110%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

again, it looks fine on a laptop, but the side bar is messed up when i’m viewing it from an iphone.

is there any way i can fix this?

Also, is it possible to keep the .site-content and #secondary {/* Sidebar 1 */ settings on laptop view and omit this on mobile view?

apologies to my lack of knowledge on this. I’m new in wordpress.