Difficulty getting a full width display - html

Question

I am working on a Joomla 2.5 based English-Thai website. There is a menu item in Thai in a hidden menu. This menu item is starred and so when the website is accessed, the Thai page is displayed. There is also an similar menu item in English. The two pages can be accessed one from the other by buttons.
As can be seen in the images, while the Thai page displays full width, the English page does not. The problem seems to be dependent on starring, since swapping the starring over to the English menu item results in the English page being displayed full width, and the Thai page narrowed
I've looked thru the Joomla backend for any clues as to why this is happening, but I can't see any. Any help would be much appreciated.
EDIT
Here is part of the markup and CSS for the 2 pages
HTML - Thai page
<div id="front_page">​
<div><span id="btn_text">english</span></div>
<div id="fp_container">
<!-- flex container -->
<div id="fp_logo">
<!-- first flex item containing the e2tw logo -->
<img class="fpm_image" src="/templates/beez_20/images/e2tw/e2tw_logo1.svg" />
<p class="fp_content1">english2theworld</p>
<p class="fp_content2">สำหรับผู้ที่ต้องการเรียนภาษาอังกฤษ</p>
<div class="fp_login"> {loadmodule mod_login}</div>
</div>
<div id="intro_container1">
<div id="intro_outliner">
<div id="intro_item1" class="intro_items intro_item_1 intro_item_eng">
<p id="intro_head1" class="intro_content fp_heading"><span class="intro_head_title">เชิญเข้าสู่ โปรแกรม <span class="e2tw_text">english2theworld</span></span></p>
<ul class="fp_lists fa-ul icon-star">
<li class="fp_list_text ">โปรแกรม english2theworld เป็นการวางรากฐานด้วยการสอนภาษาอังกฤษด้วยการฝึกหัดที่นำสมัย</li>
<li class="fp_list_text ">english2theworld นำสมัยในด้านการสื่อสารด้วยเทคโนโลยีที่ช่วยให้นักเรียนเรียนรู้ในการพูด การอ่านและการเขียนภาษาอังกฤษเป็นไปได้โดยเห็นผลอย่างรวดเร็วและมีประสิทธิภาพ</li>
</ul>
</div>
<!-- markup deleted here similar to the abaove -->
</div>
</div>
</div>
</div>
HTML - English page
<div id="front_page">​
<div><span id="btn_text">อังกฤษ</span></div>
<div id="fp_container">
<!-- flex container -->
<div id="fp_logo">
<!-- first flex item containing the e2tw logo -->
<img class="fpm_image" src="/templates/beez_20/images/e2tw/e2tw_logo1.svg" />
<p class="fp_content1">english2theworld</p>
<p class="fp_content2">for all who want to learn English</p>
<div class="fp_login"> {loadmodule mod_login}</div>
</div>
<div id="intro_container1">
<div id="intro_outliner">
<div id="intro_item1" class="intro_items intro_item_1 intro_item_eng">
<p id="intro_head1" class="intro_content fp_heading"><span class="intro_head_title">WELCOME T0 <span class="e2tw_text">english2theworld</span></span></p>
<ul class="fp_lists fa-ul icon-star">
<li class="fp_list_text ">english2theworld is based on sound teaching practice</li>
<li class="fp_list_text ">english2theworld uses interactive web technology to help students learn to speak, read and write English as quickly and efficiently as possible</li>
</ul>
<!-- markup deleted here similar to the abaove -->
</div>
</div>
</div>
</div>
CSS
div#fp_container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
padding-bottom: 1%;
}
div#fp_logo {
order: 0;
flex: 1 1 auto;
align-self: auto;
width: 35%;
border: 1px solid #000093;
margin: 0 0 0 4%;
background: #EFF1FF;
}
div#fp_logo img.fpm_image {
width: 70%;
height: auto;
margin: auto auto;
display: block;
margin-top: 5%;
}
p.fp_content1, p.fp_content2 {
font-family: 'Baumans', cursive;
font-weight: 600;
color: #000093;
text-align: center;
}
p.fp_content1 {
font-size: 1.9em;
margin: 1% 0 1% 0;
}
p.fp_content2 {
font-size: 1.4em;
margin: 0 0 1% 0;
}
div.fp_login {
margin: 10% 2% 5% 2%;
}
div.fp_login fieldset.userdata ul {
margin: 0;
}
div.fp_login li {
font-size: 0.5em;
}
div#intro_container1 {
flex: 2 1 auto;
display: flex;
flex-flow: column wrap;
// justify-content: flex-start;
// align-content: center;
//align-items: baseline;
// margin: 2% 5% 5% 2%;
width: 95%;
}
div.intro_outliner {
border: 1px solid #000093;
}
div#intro_item1, div#intro_item2, div#intro_item3,
div#intro_item4, div#intro_item5 {
order: 0;
flex: 0 1 90%;
width: 87%;
margin: 0 0 2% 5%;
background: #EFF1FF;
}
I hope this helps. Thank you for your interest.