Smaller version doesn't look balanced

[ChrisjChrisj]

The section I’m working on looks balanced, as it seems the “100%” appears to fits well with the larger version, but looks out of balance (from a design perspective) with the smaller version (see attached images. I’ve tried several things, but can’t seem to get it. What do you think? Any help will be appreciated. Here’s my code:

.j-3 {
padding: 5px 0;
height: auto;
width: 100%;
background-color: #696969;
color: #ffffff;
}

.nowrap {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}

.box0 {
   margin:1px 2px -15px 2px;
   padding:0px 8px 0px 8px;
   font-family:"Open sans", Helvetica, Arial";
}
.box0.left {
 font-size:60px;
padding:25px 5px 0px 20px;
}

.box0.right {
padding:40px 7px 0px 3px;
}

.horz1 {
   padding:0 10px;
   text-align:center;
   color:#e5e5e5;
}


<div class="j-3">
<div class="nowrap">
<div class="box0 left">
<p style="color:#ffffff; font-weight:600;">100%</p>
</div>
<div class="box0 right">
		<h4 class="thin">text 100% text text tedxt text text text text text text text text  text text text text text text<br></h4>
		</div>
		</div>
		<div class="horz1">
		<h4 class="thin">text text text text text text  text text text text<br>
		 text text text text text text  text text text text text text text text</h4>
		<h3 class="thin"><p style="font-size:24px; color:#ffffff;">text text text text text text text text</p></h4><br>
		</div>
		</div>

[PaulOB]

First run your css and html through the validators as you have errors in both (we have already explained in your other thread what the html errors are anyway).

Once you’ve fixed the html then stop using negative margins on elements just because you haven’t accounted for the default margins on elements like p, h1.h2,h3,h4 etc which have margins applied by default.

Then when you are ready you can put in a media query at a point where you think your design no longer works properly. I would tend to center everything for the smaller view with a media query like so.

@media screen and (max-width:600px) {
	.nowrap{display:block;text-align:center;}
	.box0.left,.box0.right{padding:20px 0;margin:0;}
	.box0 p{margin:0;}
}

Please fix your errors first though as I don’t want to see you repeating them in another thread (hint - you can’t nest p tags in heading tags.)