My issue is with the return of "Clocks" (not "Clock") in the following code snippet in App.js

```
function App() {
  return (
  <div>
    <section className="section">
      <div className="box-main">
        <div className="firstHalf">
          <div className ="top-line">
            <Clock></Clock><Quotes></Quotes>              
          </div>
          <div className = "worldClocks">
            <div><Clocks></Clocks></div>
          </div>

```

The function "Clocks" is a timezone date & time calculation in "worldClocks.js" that produces this list of stock exchanges current time on screen, and displays them on separate lines like this...

```
ASX(10): 11:52:25 am
TSE(9:30): 10:52:25 am
SSE(9:15): 9:52:25 am
HKE(9:30): 9:52:25 am
SGX(9:00): 9:52:25 am
NSE(9:00): 7:22:25 am
DIFX(10:00): 5:52:25 am
RTS(9:30): 4:52:25 am
JSE(9:30): 3:52:25 am
FWB(9:30): 3:52:25 am
LSE(8): 02:52:25
BM/F(10): 22:52:25
NYSE(9.30): 9:52:25 PM
TXE(9.30): 9:52:25 PM

```

I am trying to get the css (in App.scss) to put them on one line, but nothing has worked. My Apps.scss relevant section is this.

```
.box-main {
    color: white; //text colour
    margin-left: 25px;    
}     
.firsthalf {
    min-width: 100%;
    display: flex;
}    
.top-line {
    font-size: 1em;
    max-width: 100%;
    display: flex;
    align-content: space-between;
    gap: 30px;
}    
.worldClocks {
    display: inline-flex;
    flex-direction: row;
}

```

I am not sure how to find out what is being returned by the call to worldClocks but I am thinking that it is sending everything back in one go, not each worldClock calculation individually. If this is the case, **my question is how do I use css to tell it to then display all those clocks on the same line?** Can I pass css back through a function? What is the best practice approach to this, assuming that I am right about the cause.

EDIT: Below is the request for the worldClock.js file (fyi the clock.js file is not relevant, it is just similarly named and produces the current date and time but is not connected to this)

```
import React from 'react';
//import * as ReactDOM from 'react-dom';
import { Component } from 'react';

// Timezone strings - https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
// Changed update setInterval to 30 seconds (30000) instead of every second (1000)

class Clocks extends Component {
  constructor(props) {
    super(props);

    this.state = {
      date: new Date()
    };

    this.updateDate = this.updateDate.bind(this);
  }

  componentDidMount() {
    this.interval = setInterval(this.updateDate, 30000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateDate() {
    this.setState({
      date: new Date()
    });
  }

// Add all the world clocks wanted in here and in order of display
  render() {
    return (
      <div>
        <div>{this.props.name}</div>
        <div>
        <Clock
            name="ASX(10): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Australia/Sydney"}
            hour12={"false"}
          />
        <Clock
            name="TSE(9:30): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Asia/Tokyo"}
            hour12={"false"}
            //timeStyle="short"
          />
        <Clock
            name="SSE(9:15): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Asia/Shanghai"}
            hour12={"false"}
            //timeStyle="short"
          />
        <Clock
            name="HKE(9:30): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Asia/Hong_Kong"}
            hour12={"false"}
          />
        <Clock
            name="SGX(9:00): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Asia/Singapore"}
            hour12={"false"}
          />
        <Clock
            name="NSE(9:00): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Asia/Kolkata"}
            hour12={"false"}
          />
        <Clock
            name="DIFX(10:00): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Asia/Dubai"}
            hour12={"false"}
          />
        <Clock
            name="RTS(9:30): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Europe/Moscow"}
            hour12={"false"}
          />
        <Clock
            name="JSE(9:30): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Africa/Johannesburg"}
            hour12={"false"}
          />
        <Clock
            name="FWB(9:30): "
            date={this.state.date}
            country={"en-AU"}
            timeZone={"Europe/Berlin"}
            hour12={"false"}
          />
        <Clock
            name="LSE(8): "
            date={this.state.date}
            country={"en-GB"}
            timeZone={"Europe/London"}
            hour12={"false"}            
          />
        <Clock
            name="BM/F(10): "
            date={this.state.date}
            country={"en-GB"}
            timeZone={"America/Sao_Paulo"}
            hour12={"false"}            
          />
        <Clock
            name="NYSE(9.30): "
            date={this.state.date}
            country={"en-US"}
            timeZone={"America/New_York"}
            hour12={"false"}
          />
        <Clock
            name="TXE(9.30): "
            date={this.state.date}
            country={"en-US"}
            timeZone={"America/Toronto"}
            hour12={"false"}
          />

        </div>
      </div>
    );
  }
}

class Clock extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isHidden: true
    };

    this.showClock = this.showClock.bind(this);
  }

  showClock() {
    this.setState({
      isHidden: !this.state.isHidden
    });
  }

  // This bit sends back the clock and the time
  render() {
    return (
      <div>
        <div>
            {this.props.name} 
            {this.props.date.toLocaleTimeString(this.props.country, {timeZone: this.props.timeZone})}
        </div>
      </div>
    )
  }
}

//ReactDOM.render(<Clocks name="THE CLOCK" />, document.getElementById("root"));
export default Clocks;

```