I have nested containers, but Im unable to work out how to get the container rows on the right of the attached image “orange/yellow/green” to be responsive and resize as I shrink the browser windows – They should be based on the Right and left container size (18% left and 82% right), with the overall width of the sedction being 1140px. instead the content floats off to the right when the browser is reduced in size.The Entire set of containers should be centred in the middle of the page. Its just this one section Im stuck on.
Any help spotting where Ive gone Wrong would be great.
enter image description here
Ive just snipped the HTML CODE here for the problem Section
`>
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
<meta name="description" content="World-War-2.org - A World at War - A compilation of complete World War 2 Timelines split into Campaigns which detail every event, day by day from 1939 through to 1945.">
<meta name="keywords" content="world war 2, world war two, world war II, world war 2 timeline, world war two timeline, world war II timeline, world war 2 campaign, world war two campaign, world war II campaign, world war, world, war, timeline, campaign, 2, two, II, 1939, 1940, 1941, 1942, 1943, 1944, 1945">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css">
<!--<link rel="stylesheet" href="style-media-mobile.css">
<link rel="stylesheet" href="style-media-tablet.css">
<link rel="stylesheet" href="style-media-desktop.css">-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Alumni+Sans:ital,wght@0,100..900;1,100..900&family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- War Leaders Section Start -->
<section class="war-leaders">
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/winston-churchill.webp" alt="Winston Churchill" title="Winston Churchill">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagsbritain.webp" alt="Britain" title="Britian">
<p class="war-leaders-name">Winston Churchill</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">Prime Minister of the United Kingdom</p>
<p class="war-leaders-date">10th May 1940 to 26th July 1945</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Winston Churchill was appointed First Lord of the Admiralty on September 3, 1939, the same day that the United Kingdom declared war on Nazi Germany. He succeeded Neville Chamberlain as Prime Minister on May 10, 1940, and held the position until July 26, 1945. During his tenure as Prime Minister, Churchill oversaw British involvement in the Allied war effort against the Axis powers. Churchill is widely regarded as a victorious wartime leader who played a crucial role in defending Europe's liberal democracy against the spread of fascism. However, some wartime events, such as the 1945 bombing of Dresden, have generated controversy. Churchill was the most important of the Allied leaders during the first half of World War II. He rallied the nation in defiance of Hitler and streamlined planning and decision-making. His forceful personality was instrumental in cementing the 'Big Three' Alliance with Britain's powerful allies, Russia and the United States. Churchill's speeches are among the most powerful ever delivered in the English language. His words were defiant, heroic, and human, lightened by flashes of humour. They reached out to everyone in Britain, across Nazi-occupied Europe, and throughout the world.</p>
</div>
</div>
</div>
<br />
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/josef-stalin.webp" alt="Joseph Stalin" title="Joseph Stalin">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagssoviet_union.webp" alt="Soviet Union" title="Soviet Union">
<p class="war-leaders-name">Joseph Stalin</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">Premier of the Soviet Union</p>
<p class="war-leaders-date">21st January 1924 to 5th March 1953</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Joseph Stalin emerged as one of the most successful leaders of World War 2. Having attempting to form an alliance against Hitler with Western powers in mid 1939, Stalin reversed his position and made a pact with Hitler just before Germany invaded Poland begininh World War 2. He belived this would give the Soviet union time to prepare for War against Germany, whilst also allowing him to annex territory in Eastern Europe. The brief respite Stalin’s bargaining gained him, proved to be inadequate when Germany attack the Soviet Union in June 1941 as his Armys were torn apart by the experienced Germans. Stalin appointed himself as supreme commander in chief and helped organize a successful counter-offensive when Moscow was threatened by the Germans in the winter of 1941. The Soviet Army, under Stalin’s close direction, also won the Battle of Stalingrad in the winter of 42-43. With the German defeat at the Battle of Kursk in the summer of 1943, the tide had turned against Germany and the Red Army pushed them all the way back to Berlin, forcing Germanys surrenders in May 1945. On the Political front, Stalin participated in high-level meetings with his Western allies as member of the “Big Three” with Churchill and Roosevelt at Tehran in 1943, and then again at Yalta and Potsdam in 1945.</p>
</div>
</div>
</div>
<br />
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/adolf-hitler.webp" alt="Adolf Hitler" title="Adolf Hitler">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagsgermany.webp" alt="Germany" title="Germany">
<p class="war-leaders-name">Adolf Hitler</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">Chancellor and Führer of Germany</p>
<p class="war-leaders-date">30th January 1933 to 30th April 1945</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Adolf Hitler became leader of Germany on January 30th 1933 where upon he immediately began the process of rearming Germany and reversing the injustices of the Versailles Treaty, re-occupying the Rhineland and reintroducing conscription. Hitler was directly involved in the political successes that saw the Anschluss of Austria with Germany and the occupation and dismemberment of Czechoslovakia. By the summer of 1939 Hitler felt strong enough to embark on the military expansion of Germany ordering the invasion of Poland on September 1st, 1939 which led to the beginning of World War 2. The first years of war saw Germany achieve many victories, but by late 1942 having overreached himself, the tide of war had started to turn against Germany. With America now in the war and Germany defeated at Stalingrad, he became increasingly isolated, paranoid and irrational as the gravity that Germany eventual defeat dawned on him. By the 30th of April 1945 and with the Red Army having fought to within metres of the Reichstag, he chose to commit suicide in his Berlin Bunker, rather than be captured.</p>
</div>
</div>
</div>
<br />
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/benito-mussolini.webp" alt="Benito Mussolini" title="Benito Mussolini">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagsitaly.webp" alt="Italy" title="Italy">
<p class="war-leaders-name">Benito Mussolini</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">Prime Minister and Duce of Italy</p>
<p class="war-leaders-date">31st October 1922 to 25th July 1943</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Benito Mussolini was the dictator of Italy and the founder of fascism. During World War 2, he was the less dominant half of the axis powers. Mussolini understood that peace was essential for Italy’s well-being and that a long war might prove disastrous, but he was beset by concerns that the Germans might take all the glory and by not coming into the war early on their side he would lose claim to conquered lands as Hitlers Army's advanced. He therefore commited Italy to the war in June 1940, just before the French Armistice. Italian forces fared poorly from the outset, with significant defeats in North Africa and Greece and then in the Soviet Union. Mussolini had underestimated the extent of public support for his regime and for the war. When the Western Allies invaded Sicily in July 1943, the King arrested and imprisoned him with the intention of handing him over to the Allies, but he was rescued by German forces before this could happen. Mussolini was then made the head of a new Fascist state controlling the unoccupied parts of Northern Italy. In the turmoil of the last weeks of the war, he was captured by Communist Partisans and executed.</p>
</div>
</div>
</div>
<br />
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/charles-de-gaulle.webp" alt="Charles De Gaulle" title="Charles De Gaulle">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagsfrance.webp" alt="France" title="France">
<p class="war-leaders-name">Charles De Gaulle</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">Leader of Free French and French Republic</p>
<p class="war-leaders-date">28th June 1940 to 26th January 1946</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Charles de Gaulle was a French general in the earlier stages of the war. However, when the French government signed an Armistice with the Germans in June 1940, de Gaulle refused to accept it and escaped to London, where with the backing and support of the British he announced the formation of a French government in exile and became the leader of the Free French forces which continued the fight alongside the British to liberate France from German occupation. After the liberation of Paris in August 1944, de Gaulle was given a hero’s welcome in the French capital and became president of the provisional government, guiding France through the writing of the constitution on which the Fourth Republic was based. De Gaulle’s leadership during World War 2 helped to restore democracy in France and laid the foundation for his later role as president of France’s Fifth Republic.</p>
</div>
</div>
</div>
<br />
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/franklin-roosevelt.webp" alt="Franklin Roosevelt" title="Franklin Roosevelt">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagsunited_states.webp" alt="United States" title="United States">
<p class="war-leaders-name">Franklin Roosevelt</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">President of the United States</p>
<p class="war-leaders-date">4th March 1933 to 12th April 1945</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Franklin D. Roosevelt, was the 32nd President of the United States before America's entry into the World War 2 he stood up strongly against the Axis powers, whilst gradually preparing the country for war and aiding the British with weaponry. Once America entered the war, he supervised the mobilization of the American economy to support the war effort and implemented a Europe first strategy. He met with Churchill in a number of wartime conferences at which differences were settled and strategy decided. However, relations with the Soviet Union were more difficult, with the Soviet Union demanding large quantities of lend-lease supplies but seldom divulging its military plans or acting in coordination with its Western allies. Ultimately Roosevelt, believed that the maintenance of peace after the war depended on friendly relations with the Soviet Union working hard to win the confidence of Joseph Stalin, whilst also working with the other Allied leaders to lay the groundwork for the United Nations and other post-war institutions.</p>
</div>
</div>
</div>
<br />
<div class="container" data-type="outercontainer">
<div class="container" data-type="leftcontainer"><img class="war-leaders-photo" src="images/war-leaders/hideki-tojo.webp" alt="Hideki Tojo" title="Hideki Tojo">
</div>
<div class="container" data-type="rightcontainer">
<div class="container" data-type="righttopcontainer"><img class="war-leaders-flag" src="imagesflagsjapan.webp" alt="Japan" title="Japan">
<p class="war-leaders-name">Hideki Tojo</p>
</div>
<div class="container" data-type="rightmiddlecontainer">
<p class="war-leaders-title">Prime Minister of Japan</p>
<p class="war-leaders-date">18th October 1941 to 18th July 1944</p>
</div>
<div class="container" data-type="rightbottomcontainer">
<p class="war-leaders-description"> Hideki Tojo was also a leading advocate of Japan’s Tripartite Pact with Germany and Italy in 1940 and later served as the prime minister of Japan from 1941 to 1944. Tojo was known for being a hardworking and efficient bureaucrat, as well as one of the most aggressive militarists in the Japanese leadership. He led his country’s war efforts after the attack on the U.S. military base at Pearl Harbor on December 7, 1941. Under his direction, Japan initially scored numerous victories throughout Southeast Asia and the western Pacific region. However, following after a series of military reverses in the second half of 1942, Tojo assumed virtual dictatorial powers, taking over the post of chief of the General Staff. Despite his efforts, Japan’s losses mounted and its fragile industrial foundations collapsed. Tojo was removed as chief of staff and Prime Minister in July 1944. After the war, Tojo was tried and executed for his part in Japan's war crimes.</p>
</div>
</div>
</div>
</section>
<!-- War Leaders Section End -->
</body>
</html>
Ive put the entire CSS CODE here for my site ** the /* War Leader Section Start / is the CCS Section in question*
:root {
--clr-primary-400: #f44336;
--clr-accent-100: #ffffff;
--clr-accent-900: #000000;
--font-family-primary: "helvetica";
--font-family-secondary: "Amatic SC", sans-serif;
}
/* Remove Default Margin */
* {
margin: 0;
padding: 0;
font: inherit;
font-family: "helvetica";
}
/* Set Core Root Defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set Core Body Defaults */
body {
text-rendering: optimizeSpeed;
}
/* Make Images Easier to Work With */
img,
picture,
svg {
max-width: 100%;
display: block;
}
/* Header Section */
.header {
/*height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0,0,0,0.25),#999393),url(images/hero-photo/a-world-at-war-cover-d-1040-l85.webp);
background-position: center;
background-size: cover;
overflow-x: hidden;*/ /*-----added this overflow hidden-------------*/
/*position: relative;*/
}
.container[data-type="headercontainer"] {
height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0,0,0,0.25),#999393),url(images/hero-photo/a-world-at-war-cover-d-1040-l85.webp);
background-position: center;
background-size: cover;
overflow-x: hidden; /*-----added this overflow hidden-------------*/
position: relative;
container-type: inline-size;
/*flex-direction: column;
padding: 0px 0px 0px 0px;*/
/*display: flex;*/
margin: auto;
/*gap: 0 0;*/
/*background: #b6ff00;*/
}
/* Navigation Bar */
nav {
display: flex;
padding: 1% 3%;
justify-content: space-between;
align-items: center;
}
/* Website Logo Image Inside Navigation Bar */
nav img {
width: 175px;
}
.nav-menu-links {
flex: 1;
text-align: right;
}
.nav-menu-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-menu-links ul li a {
color: #fff;
text-decoration: none;
font-family: "Amatic SC", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
}
.nav-menu-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-menu-links ul li:hover::after {
width: 100%;
}
/* Hide Sub Menu being displayed until Hovered on */
.sub-menu-1 {
display: none;
}
/* Display Sub Menu when Hovered on */
.nav-menu-links ul li:hover .sub-menu-1 {
display: block;
position: absolute;
margin-top: 5px;
margin-left: -15px;
width: fit-content;
}
/* Sub Menu1 UL */
.nav-menu-links ul li:hover .sub-menu-1 ul {
margin: 10px;
background: rgba(0,0,0,0.25);
text-align: left;
}
.nav-menu-links ul li:hover .sub-menu-1 ul li {
padding: 10px;
transition: 0.5s;
border-bottom: 1px dashed #fff;
width: fit-content;
white-space: nowrap;
position: relative
}
.nav-menu-links ul li:hover .sub-menu-1 ul li:last-child {
border-bottom: none;
}
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1 {
font-size: 75px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
}
.text-box p {
margin: 10px 0 40px;
font-size: 40px;
color: #fff;
font-family: "Amatic SC", sans-serif;
font-weight: 400;
}
.hero-buttons a {
font-size: 20px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
}
.hero-button1 {
width: 150px;
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 0px;
margin: 0 3px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-button1:hover {
border: 1px solid #fff;
background: #f44336;
transition: 0.5s;
}
.hero-button2 {
width: 150px;
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 0px;
margin: 0 3px;
font-size: 13px;
background: #f44336;
position: relative;
cursor: pointer;
}
.hero-button2:hover {
border: 1px solid #f44336;
background: #f44336;
transition: 0.5s;
}
.hero-button3 {
width: 150px;
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 0px;
margin: 0 3px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-button3:hover {
border: 1px solid #fff;
background: #f44336;
transition: 0.5s;
}
.quote-text-box {
width: 90%;
color: #fff;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.quote-text-box h1 {
font-size: 25px;
font-family: "Amatic SC", sans-serif;
font-weight: 700;
}
.quote-text-box p {
margin: 10px 0 10px;
font-size: 20px;
color: #fff;
font-family: "Amatic SC", sans-serif;
font-weight: 400;
}
/* Timeline Graphic Section Start */
.container[data-type="timelinegraphiccontainer"] {
container-type: inline-size;
flex-direction: row;
padding: 3px 3px 0px 3px;
display: flex;
justify-content: center;
gap: 0 0;
}
.timeline-image-desktop {
}
.timeline-image-mobile {
}
/* Timeline Graphic Section End */
/* Introduction Section Start */
.introduction {
display: flex;
}
.container[data-type="introductioncontainer"] {
container-type: inline-size;
flex-direction: row;
padding: 0px 3px 0px 3px;
display: flex;
width: 1140px;
margin: auto;
gap: 0 0;
/*background: #b6ff00;*/
border-left: double;
border-left-color: #808080;
border-left-style: ridge;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.introduction-body {
font-size: 15px;
color: #000000;
font-family: "helvetica";
font-weight: 400;
text-align: justify;
padding: 0px 0px 0px 0px;
line-height: 1.5em;
}
.introduction-bold {
font-size: 15px;
color: #000000;
font-family: "helvetica";
font-weight: 600;
line-height: 1.5em;
}
.introduction-red {
font-size: 15px;
color: #f44336;
font-family: "helvetica";
font-weight: 400;
line-height: 1.5em;
}
.introduction-body::first-letter {
initial-letter: 2;
margin-top: -1px;
padding: 0px 3px 0px 0px;
}
/* Introduction Section End */
/* War Leader Section Start */
.warleaders {
/*display: flex;*/
}
.warleaders > .container {
container-type: inline-size;
display: flex;
}
.container[data-type="outercontainer"] {
container-type: inline-size;
flex-direction: row;
padding: 0px 0px 0px 3px;
display: flex;
width: 1140px;
margin: auto;
/* align-items:start;
justify-content: start;*/
gap: 0 0;
/* align-self:start; */
}
.container[data-type="leftcontainer"] {
container-type: inline-size;
/*flex-direction: column;*/
display: flex;
width: 18%;
/*justify-content: start;*/
align-items: start;
/*align-self: start;*/
gap: 0 0;
padding: 0px 0px 0px 0px;
background-color: rgba(0,0,0,0.25);
/*margin: auto;*/
}
.war-leaders-photo {
width: 100%;
border-radius: 5px;
padding: 0px 0px 0px 0px;
border: solid 1px #000000;
}
.container[data-type="rightcontainer"] {
container-type: inline-size;
display: flex;
flex-direction: column;
width: 82%;
padding: 0px 3px 0px 5px;
gap: 0 0;
background-color: rgba(0,0,0,0.25);
/*margin:auto;*/
}
.container[data-type="righttopcontainer"] {
container-type: inline-size;
display: flex;
flex-direction: row;
align-items: center;
gap: 0 0;
padding: 0px 0px 0px 0px;
background-color: #ff6a00;
/*margin:auto;*/
/*width: 100%;*/
}
.war-leaders-flag {
width: 80px;
height: 48px;
border: solid 1px #000000;
border-radius: 5px;
}
.war-leaders-name {
padding: 0px 0px 0px 5px;
font-size: 25px;
font-weight: 600;
line-height: 1.5em;
}
.container[data-type="rightmiddlecontainer"] {
container-type: inline-size;
flex-direction: column;
display: flex;
gap: 0 0;
padding: 0px 0px 0px 0px;
background-color: #ffd800;
/*margin:auto;*/
/*width: 100%;*/
}
.war-leaders-title {
font-size: 20px;
font-weight: 600;
line-height: 0.5em;
padding: 10px 0px 0px 0px;
}
.war-leaders-date {
font-size: 18px;
font-weight: 400;
line-height: 1.3em;
padding: 4px 0px 0px 0px;
}
.container[data-type="rightbottomcontainer"] {
container-type: inline-size;
flex-direction: row;
display: flex;
gap: 0 0;
padding: 0px 0px 0px 0px;
background-color: #b6ff00;
/*margin:auto;*/
/*width: 100%;*/
}
.war-leaders-description {
text-align: justify;
font-size: 15px;
font-weight: 400;
line-height: 1.5em;
padding: 0px 0px 0px 0px;
}
.war-leaders-description::first-letter {
initial-letter: 2;
margin-top: -1px;
padding: 0px 3px 0px 0px;
}
/* War Leader Section End */
.flags { /* HIDING FLAGS SECTION */
width: auto;
padding: 5px 0px 5px 0px;
display: none; /* HIDES FLAGS SECTION */
}
.flags-row {
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
padding: 5px 0px 5px 0px;
}
.flags-column {
box-sizing: border-box;
padding: 0px 5px 0px 5px;
}
.flags-column img {
border: 1px solid #808080;
border-radius: 5px;
}
.medals {
width: auto;
padding: 5px 5px 5px 5px;
}
.medals-row {
display: flex;
align-items: center;
justify-content: space-around;
}
.medals-column {
box-sizing: border-box;
}
.copyright {
background: #808080;
width: auto;
padding: 5px 5px 5px 5px;
margin: auto;
}
.copyright p {
font-size: 17px;
color: #fff;
font-family: "Alumni Sans", sans-serif;
font-weight: 400;
text-align: center;
}
Ive made number changes to the containers adding and removing CSS among which
display:
width:
margin:
but no joy and i now cant see the trees for the wood. 🙁