troubleshooting Question

Page not full width

Avatar of David Schure
David Schure asked on
* Flex CSSCSS
2 Comments1 Solution6 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
David Schure

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros