Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Will Duke
Will Duke
5,007 Points
Posted by Will Duke
Will Duke
5,007 Points

Need horizontal div row, I have the bootstrap class col-md-3 col-sm-6 I made a fiddle

http://jsfiddle.net/toondog/kr1eo6v4/5/ i thought I could line these horizontally with the framework however it is not working. 

 <section id="services" class="services bg-primary">
<div class="me"><img src="http://s26.postimg.org/ty71q09ft/Superman.png" /></div>
   <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Superman at the newstand</h2>
                    <p class="lead">drawings <a target="_blank" href="ufc.com">too</a>.</p>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-10 col-lg-offset-1">
                    <h2>Services</h2>
                    <hr class="small">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span class=>
                               <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>Photography</strong>
                                </h4>
                                <p>graphics</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span>
                                <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>Animation</strong>
                                </h4>
                                <p>special effects.</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span class="">
                                <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>Graphic Art</strong>
                                </h4>
                                <p>media.</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span class=""> text-primary">
                                <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>illustration</strong>
                                </h4>
                                <p>comic art</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                    </div>
                    <!-- /.row (nested) -->
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
            </div>

        <!-- /.container -->
    </section>
</html>```

1 Answer

Mark Josephsen
Mark Josephsen
8,803 Points
Mark Josephsen
Mark Josephsen
8,803 Points

You have a few errors in your code:

  • the span on line 21 is incorrectly typed
  • Also, check line 57. Hard to tell what you were trying to do there.

Also, have you tried something like: .row div { display: inline-block;} ? Could help.

Will Duke
Will Duke
5,007 Points
Will Duke
Will Duke
5,007 Points

Thanks Mark.
sorry about all the mistakes. I'm still trying to figure out how to edit markup.
normally i would use the class with a { display: inline-block;}, however , if my code was better the bootstrap class <div class="row text-center"> would be in effect.