Avatar of David Schure
David Schure
 asked on

Page not full width

I added FLEX code to my page. Now its no longer full screen width!

https://arise.plus/Resource.php

   <style>
:root {
  box-sizing: border-box;
}

body {
  max-width: 1200px;
  /*margin: 30px auto;*/
}

h1 {
  font-family: cursive;
}

.container {
  display: flex;
  width: 100%;
}

.column-1 {
  flex-shrink: 0; /* shrinks to 0 to apply 60% width*/
  flex-basis: 60%; /* sets initial width to 60%*/
}

.column-3 {
  flex-shrink: 0; /* shrinks to 0 to apply 33% width*/
  flex-basis: 30%; /* sets initial width to 33%*/
}

.column-4 {
  flex-shrink: 0; /* shrinks to 0 to apply 33% width*/
  flex-basis: 30%; /* sets initial width to 33%*/
}
.box1 {
  /*background-color: rgb(245, 215, 160);*/
  padding: 10px;
 /* border-radius: 12px;
  border: 2px solid rgb(116, 113, 113);*/
  margin: 1rem;
}

.box2 {
  background-color: #c1e1fa;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgb(116, 113, 113);
  margin: 1rem;
}
@media only screen and (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  .box {
    margin: 0 0 1rem;
  }
}
.country h2{
      margin: 0 auto;
      padding-left:0px;
      color:#000;
      font-family:Verdana, Geneva, sans-serif;
      font-size:16px;
      text-align:left;
      }

.responsive {
  width: 100%;
  height: auto;
  margin-bottom:10px;
}
.sadman {
        flex-grow: 0;
      width:300px;
      margin-top:20px;
      }
</style>

Open in new window

* Flex CSSCSS

Avatar of undefined
Last Comment
David Schure

8/22/2022 - Mon
David Schure

ASKER
This works...
html, body, .viewport {
        width: 100%;
        height: 100%;
        margin: 0;
      }
/*body {
  max-width: 1200px;
  /*margin: 30px auto;
}*/

Open in new window

Any downsides?
ASKER CERTIFIED SOLUTION
David Schure

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck