My Times CSS Help


#1

https://www.codecademy.com/courses/freelance1-u4/projects/my-times?program_content_id=0152055d515e56bc97115fbfb512ca1c&program_id=84660132d83e63bfe58167f1d44414b1

Hi, I'm working the Freelance Website Development course: Display and Positioning

For the project "My Times" i'm having trouble getting the "justify-content:space-between;" to work.
The 3 columns (or articles) are supposed to have a fixed width, and have space between them. When the webpage is scaled down, it is supposed to overflow: scroll;

Instead, all 3 of my columns are sticking together and growing and shrinking as the webpage is resized.

Are there any glaring errors in the CSS that explains this behaviori?

Let me know if posting the HTML will help.


header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  justify-content: space-between;

  border: 1px solid lightgrey;

  font-family: Verdana;
  font-size: 14px;
  font-weight: bold;
}

header p{
  color: aquamarine;
  display: inline-flex;
  text-align: center;
  padding: 10px;
}

.leftheader{
  display: flex;
  align-items: center;
  padding: 10px;
  flex-wrap: nowrap;
}

#logo {
  display: inline-flex;
  text-align: center;
  justify-content: left;

}

nav a {
  padding: 10px;
  text-align: center;
  color: black;
}

.bigcontainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: scroll;

}

.column {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.large {
  width: 630px;
  max-width: 630px;

}

.medium {
  width: 300px;
  min-width: 300px;
}

.small {
  width: 240px;
  min-width: 240px;
}

.article {
  border: solid black 1px;

}


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.